diff --git a/frontend/components/bc/BcAccordion.vue b/frontend/components/bc/BcAccordion.vue
new file mode 100644
index 000000000..c8ddfca41
--- /dev/null
+++ b/frontend/components/bc/BcAccordion.vue
@@ -0,0 +1,141 @@
+<script setup lang="ts" generic="T">
+import { faCopy } from '@fortawesome/pro-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+
+const props = defineProps<{
+  infoCopy?: string,
+  items?: T[],
+  open?: boolean,
+}>()
+const isOpen = ref(props.open ?? false)
+const {
+  copy,
+  isSupported,
+} = useClipboard()
+const idList = useId()
+
+const textToCopy = ref<string>('')
+onMounted(() => {
+  const ulElement = document.getElementById(idList)
+  const liElements = ulElement?.querySelectorAll('li')
+  if (liElements) {
+    const liTexts = [ ...liElements ].map(liElement => liElement.textContent?.trim())
+    textToCopy.value = liTexts.join(', ')
+  }
+})
+const toast = useBcToast()
+const copyText = async () => {
+  await copy(textToCopy.value).then(() => {
+    toast.showInfo({
+      detail: 'Copied to clipboard',
+      summary: props.infoCopy ?? '',
+    })
+  })
+}
+</script>
+
+<template>
+  <details
+    class="bc-accordion"
+    :open
+  >
+    <summary
+      @click="isOpen = !isOpen"
+    >
+      <span class="bc-accordion__heading">
+        <IconChevron
+          :direction="isOpen ? 'bottom' : 'right'"
+        />
+        <slot name="headingIcon" />
+        <slot name="heading" />
+      </span>
+    </summary>
+    <BcCard class="bc-accordion__content">
+      <ul
+        :id="idList"
+        class="bc-accordion-list"
+      >
+        <li
+          v-for="item in items"
+          :key="`${item}`"
+          class="bc-accordion-list__item"
+        >
+          <slot name="item" :item />
+        </li>
+      </ul>
+      <template #floating-action-button>
+        <BcButtonIcon
+          v-if="isSupported"
+          screenreader-text="Copy list to clipboard"
+          class="bc-accordion__button"
+          @click="copyText"
+        >
+          <FontAwesomeIcon
+            :icon="faCopy"
+            class="bc-accordion__button-icon"
+          />
+        </BcButtonIcon>
+      </template>
+    </BcCard>
+  </details>
+</template>
+
+<style scoped lang="scss">
+@use '~/assets/css/breakpoints' as *;
+
+.bc-accordion {
+  position: relative;
+  summary {
+    list-style: none;
+  }
+  summary::-webkit-details-marker{
+    display: none;
+  }
+}
+.bc-accordion__heading {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.625rem;
+}
+.bc-accordion__content {
+  // display: grid;
+  margin-top: 0.625rem;
+  min-height: 2.563rem;
+  max-height: 9.375rem;
+  overflow: auto;
+  width: 100%;
+  @media (min-width: $breakpoint-md) {
+    width: 41.75rem;
+  }
+
+}
+.bc-accordion-list {
+  list-style: none;
+  padding-inline-start: 0;
+  display: inline;
+}
+.bc-accordion-list__item {
+  display: inline;
+}
+.bc-accordion-list__item:not(:last-child)::after {
+content: ', ';
+}
+.bc-accordion__button {
+  --border-width: .0625rem;
+  background-color: var(--input-background);
+  border-radius: var(--corner-radius, 4px);
+  padding: calc(0.3125rem - var(--border-width));
+  border: var(--border-width) solid var(--input-border-color);
+  color: inherit;
+  height: 1.875rem;
+  width: 1.875rem;
+  position: absolute;
+  bottom: 6px;
+  right: 11px;
+}
+.bc-accordion__button-icon {
+  width: .9375rem;
+  font-size: .9375rem;
+  line-height: 100%;
+}
+</style>
diff --git a/frontend/components/bc/BcCard.vue b/frontend/components/bc/BcCard.vue
new file mode 100644
index 000000000..f2eed9a5a
--- /dev/null
+++ b/frontend/components/bc/BcCard.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="bc-card">
+    <slot />
+    <slot name="floating-action-button" />
+  </div>
+</template>
+
+<style scoped lang="scss">
+.bc-card {
+  background-color: var(--input-background);
+  border-radius: var(--corner-radius, 4px);
+  padding: 0.625rem;
+  border: 1px solid var(--input-border-color);
+}
+</style>
diff --git a/frontend/components/bc/BcText.vue b/frontend/components/bc/BcText.vue
index 57d343cf6..588198ecf 100644
--- a/frontend/components/bc/BcText.vue
+++ b/frontend/components/bc/BcText.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
 withDefaults(
   defineProps<{
+    isDimmed?: boolean,
     tag?: 'h2' | 'p' | 'span',
-    variant?: 'base' | 'lg',
+    variant?: 'base' | 'lg' | 'md' | 'sm',
   }>(), {
     tag: 'span',
     variant: 'base',
@@ -15,6 +16,9 @@ withDefaults(
     :is="tag"
     :class="{
       'variant-lg': variant === 'lg',
+      'variant-md': variant === 'md',
+      'variant-sm': variant === 'sm',
+      'is-dimmed': isDimmed,
     }"
   >
     <slot />
@@ -23,6 +27,19 @@ withDefaults(
 
 <style scoped lang="scss">
 @use '~/assets/css/breakpoints' as *;
+.is-dimmed {
+  opacity: 0.7;
+}
+
+.variant-sm {
+  font-size: 0.875rem;
+}
+.variant-md {
+  font-family: "Montserrat";
+  font-size: 1.25rem;
+  font-weight: 500;
+  line-height: 1.2;
+}
 .variant-lg {
   font-family: "Montserrat";
   font-size: 1.25rem;
diff --git a/frontend/components/bc/header/HeaderLogo.vue b/frontend/components/bc/header/HeaderLogo.vue
index e2c506bd3..ce022fa17 100644
--- a/frontend/components/bc/header/HeaderLogo.vue
+++ b/frontend/components/bc/header/HeaderLogo.vue
@@ -5,13 +5,13 @@ defineProps<{
 </script>
 
 <template>
-  <BcLink
+  <NuxtLink
     to="/"
     :class="`${layoutAdaptability}-adaptability`"
   >
     <IconBeaconchainLogo alt="Beaconcha.in logo" />
     <span class="name">beaconcha.in</span>
-  </BcLink>
+  </NuxtLink>
 </template>
 
 <style lang="scss" scoped>
diff --git a/frontend/components/notifications/NotificationsDashboardDialogEntity.vue b/frontend/components/notifications/NotificationsDashboardDialogEntity.vue
new file mode 100644
index 000000000..b798d9388
--- /dev/null
+++ b/frontend/components/notifications/NotificationsDashboardDialogEntity.vue
@@ -0,0 +1,530 @@
+<script setup lang="ts">
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import {
+  faAlarmSnooze,
+  faArrowsRotate,
+  faCube,
+  faFileSignature,
+  faGlobe,
+  faMoneyBill,
+  faPowerOff,
+  faRocket,
+  faUserSlash,
+} from '@fortawesome/pro-solid-svg-icons'
+import type { NotificationDashboardsTableRow } from '~/types/api/notifications'
+
+const { t: $t } = useTranslation()
+
+const {
+  props,
+} = useBcDialog<{ identifier: string } & Pick<NotificationDashboardsTableRow, 'dashboard_id' | 'epoch' | 'group_id' | 'group_name'>>()
+
+const store = useNotificationsDashboardDetailsStore()
+
+const { data: details } = useAsyncData(() => store.getDetails({
+  dashboard_id: props.value?.dashboard_id ?? 0,
+  // dashboard_id: 5426, // 💀 (personal dashboard id) remove after development
+  epoch: props.value?.epoch ?? 0,
+  group_id: props.value?.group_id ?? 0,
+}))
+
+const validatorsOffline = computed(() => {
+  return details.value?.data?.validator_offline
+})
+const groupsOffline = computed(() => {
+  return details.value?.data?.group_offline
+})
+const validatorsBackOnline = computed(() => {
+  return details.value?.data?.validator_back_online
+})
+const attestationMissed = computed(() => {
+  return details.value?.data?.attestation_missed
+})
+const groupsBackOnline = computed(() => {
+  return details.value?.data?.group_back_online
+})
+const proposalsMissed = computed(() => {
+  return details.value?.data?.proposal_missed
+})
+const proposalsDone = computed(() => {
+  return details.value?.data?.proposal_done
+})
+const slashed = computed(() => {
+  return details.value?.data?.slashed
+})
+const syncCommittee = computed(() => {
+  return details.value?.data?.sync_committee
+})
+const withdrawal = computed(() => {
+  return details.value?.data?.withdrawal
+})
+const validatorsOfflineReminder = computed(() => {
+  return details.value?.data?.validator_offline_reminder
+})
+const groupsOfflineReminder = computed(() => {
+  return details.value?.data?.group_offline_reminder
+})
+const upcomingProposals = computed(() => {
+  return details.value?.data?.upcoming_proposals
+})
+const max_collateral = computed(() => {
+  return details.value?.data?.max_collateral_reached
+})
+const min_collateral = computed(() => {
+  return details.value?.data?.min_collateral_reached
+})
+</script>
+
+<template>
+  <div class="notifications-dashboard-dialog-entity">
+    <header class="notifications-dashboard-dialog-entity__header">
+      <h2>
+        <BcText
+          variant="lg"
+        >
+          {{ $t('notifications.dashboards.dialog.entity.title') }}
+        </BcText>
+        <BcText
+          variant="md"
+          is-dimmed
+        >
+          ({{ $t('common.epoch') }} {{ props?.epoch }})
+        </BcText>
+      </h2>
+      <h3>
+        {{ props?.group_name }}
+      </h3>
+      <div id="notifications-management-search-placholder" />
+    </header>
+    <main
+      v-if="details?.data"
+      class="notifications-dashboard-dialog-entity__content"
+    >
+      <BcAccordion
+        v-if="validatorsOffline?.length"
+        :items="validatorsOffline"
+        :info-copy="$t('notifications.dashboards.dialog.entity.validatore_offline')"
+      >
+        <template #headingIcon>
+          <FontAwesomeIcon :icon="faPowerOff" class="notifications-dashboard-dialog-entity__icon__red" />
+        </template>
+        <template #heading>
+          {{ $t('notifications.dashboards.dialog.entity.validatore_offline') }} ({{ validatorsOffline?.length ?? 0 }})
+        </template>
+        <template #item="{ item: validatorIndex }">
+          <BcLink
+            :to="`/validator/${validatorIndex}`"
+            class="link"
+          >
+            {{ validatorIndex }}
+          </BcLink>
+        </template>
+      </BcAccordion>
+      <BcAccordion
+        v-if="groupsOffline?.length"
+        :items="groupsOffline"
+      >
+        <template #heading>
+          {{ $t('notifications.dashboards.dialog.entity.group_offline', [groupsOffline?.length ?? 0]) }}
+        </template>
+        <template #headingIcon>
+          <FontAwesomeIcon :icon="faPowerOff" class="notifications-dashboard-dialog-entity__icon__red" />
+        </template>
+        <template #item="{ item: groupOffline }">
+          <span>
+            {{ groupOffline.group_name }}
+          </span>
+
+          <BcLink
+            :to="`/dashboard/${groupOffline.dashboard_id}`"
+            class="link"
+          >
+            ({{ groupOffline.dashboard_id }})
+          </BcLink>
+        </template>
+      </BcAccordion>
+      <BcAccordion
+        v-if="proposalsMissed?.length"
+        :items="proposalsMissed"
+      >
+        <template #headingIcon>
+          <FontAwesomeIcon
+            :icon="faCube"
+            class="notifications-dashboard-dialog-entity__icon__red"
+          />
+        </template>
+        <template #heading>
+          {{ $t('notifications.dashboards.dialog.entity.proposal_missed', [proposalsMissed?.length ?? 0]) }}
+        </template>
+        <template #item="{ item: proposal }">
+          <BcLink
+            class="link"
+            :to="`/validator/${proposal.index}`"
+          >
+            {{ proposal.index }}
+          </BcLink>
+          <template v-if="proposal.blocks.length">
+            [<BcLink
+              v-for="block in proposal.blocks"
+              :key="block"
+              :to="`/block/${block}`"
+              class="notifications-dashboard-dialog-entity__list-item link"
+            >
+              {{ block }}
+            </BcLink>]
+          </template>
+        </template>
+      </BcAccordion>
+      <BcAccordion
+        v-if="proposalsDone?.length"
+        :items="proposalsDone"
+      >
+        <template #headingIcon>
+          <FontAwesomeIcon
+            :icon="faCube"
+            class="notifications-dashboard-dialog-entity__icon__green"
+          />
+        </template>
+        <template #heading>
+          {{ $t('notifications.dashboards.dialog.entity.proposal_done', [proposalsDone?.length ?? 0]) }}
+        </template>
+        <template #item="{ item: proposalDone }">
+          <BcLink
+            :to="`/validator/${proposalDone.index}`"
+            class="link"
+          >
+            {{ proposalDone.index }}
+          </BcLink>
+          <template v-if="proposalDone.blocks.length">
+            [<BcLink
+              v-for="block in proposalDone.blocks"
+              :key="block"
+              :to="`/block/${block}`"
+              class="notifications-dashboard-dialog-entity__list-item link"
+            >
+              {{ block }}
+            </BcLink>]
+          </template>
+        </template>
+      </BcAccordion>
+      <BcAccordion
+        v-if="slashed?.length"
+        :items="slashed"
+      >
+        <template #headingIcon>
+          <FontAwesomeIcon :icon="faUserSlash" class="notifications-dashboard-dialog-entity__icon__red" />
+        </template>
+        <template #heading>
+          {{ $t('notifications.dashboards.dialog.entity.slashed', [slashed?.length ?? 0]) }}
+        </template>
+        <template #item="{ item: slashedValidatorIndex }">
+          <BcLink
+            :to="`/validator/${slashedValidatorIndex}`"
+            class="link"
+          >
+            {{ slashedValidatorIndex }}
+          </BcLink>
+        </template>
+      </BcAccordion>
+      <BcAccordion
+        v-if="syncCommittee?.length"
+        :items="syncCommittee"
+      >
+        <template #headingIcon>
+          <FontAwesomeIcon :icon="faArrowsRotate" class="notifications-dashboard-dialog-entity__icon__green" />
+        </template>
+        <template #heading>
+          {{ $t('notifications.dashboards.dialog.entity.sync_comittee', [syncCommittee?.length ?? 0]) }}
+        </template>
+        <template #item="{ item: syncCommitteIndex }">
+          <BcLink
+            :to="`/validator/${syncCommitteIndex}`"
+            class="link"
+          >
+            {{ syncCommitteIndex }}
+          </BcLink>
+        </template>
+      </BcAccordion>
+      <BcAccordion
+        v-if="attestationMissed?.length"
+        :items="attestationMissed"
+      >
+        <template #heading>
+          {{ $t('notifications.dashboards.dialog.entity.attestation_missed', [attestationMissed?.length ?? 0]) }}
+        </template>
+        <template #headingIcon>
+          <FontAwesomeIcon
+            :icon="faFileSignature"
+            class="notifications-dashboard-dialog-entity__icon__red"
+          />
+        </template>
+        <template #item="{ item: attestation }">
+          <BcLink
+            :to="`/validator/${attestation.Index}`"
+            class="link"
+          >
+            {{ attestation.Index }}
+          </BcLink>
+          (<BcLink
+            :to="`/epoch/${attestation.Epoch}`"
+            class="link"
+          >
+            {{ $t('common.epoch') }}
+            {{ attestation.Epoch }}
+          </BcLink>)
+        </template>
+      </BcAccordion>
+      <BcAccordion
+        v-if="withdrawal?.length"
+        :items="withdrawal"
+      >
+        <template #headingIcon>
+          <FontAwesomeIcon
+            :icon="faMoneyBill"
+            class="notifications-dashboard-dialog-entity__icon__green"
+          />
+        </template>
+        <template #heading>
+          {{ $t('notifications.dashboards.dialog.entity.withdrawal', [withdrawal?.length ?? 0]) }}
+        </template>
+        <template #item="{ item: withdrawalItem }">
+          <BcLink
+            :to="`/validator/${withdrawalItem.index}`"
+            class="link"
+          >
+            {{ withdrawalItem.index }}
+          </BcLink>
+          <template v-if="withdrawalItem.blocks.length">
+            [<BcLink
+              v-for="block in withdrawalItem.blocks"
+              :key="block"
+              :to="`/block/${block}`"
+              class="notifications-dashboard-dialog-entity__list-item link"
+            >
+              {{ block }}
+            </BcLink>]
+          </template>
+        </template>
+      </BcAccordion>
+      <BcAccordion
+        v-if="validatorsBackOnline?.length"
+        :items="validatorsBackOnline"
+      >
+        <template #headingIcon>
+          <FontAwesomeIcon
+            :icon="faGlobe"
+            class="notifications-dashboard-dialog-entity__icon__green"
+          />
+        </template>
+        <template #heading>
+          {{ $t('notifications.dashboards.dialog.entity.validator_back_online', [validatorsBackOnline?.length ?? 0]) }}
+        </template>
+        <template #item="{ item: validator }">
+          <BcLink
+            :to="`/validator/{{ validator.index }}`"
+            class="link"
+          >
+            {{ validator.index }}
+          </BcLink>
+          ({{ validator.epoch_count }} {{ $t('common.epoch', validator.epoch_count) }})<!--
+            this will remove white space in html
+          -->
+        </template>
+      </BcAccordion>
+      <BcAccordion
+        v-if="groupsBackOnline?.length"
+        :items="groupsBackOnline"
+      >
+        <template #heading>
+          {{ $t('notifications.dashboards.dialog.entity.group_back_online', [groupsBackOnline?.length ?? 0]) }}
+        </template>
+        <template #headingIcon>
+          <FontAwesomeIcon :icon="faGlobe" class="notifications-dashboard-dialog-entity__icon__green" />
+        </template>
+        <template #item="{ item: group }">
+          <span>
+            {{ group.group_name }}
+          </span>
+          <span>
+            [{{ group.epoch_count }}&nbsp;{{ $t('common.epoch', group.epoch_count) }}]
+          </span>
+          (<BcLink
+            class="link"
+            :to="`/dashboard/${group.dashboard_id}`"
+          >
+            <!--
+            this will remove white space in html
+          -->Dashboard {{ group.dashboard_id }}
+          </BcLink>)<!--
+            this will remove white space in html
+          -->
+        </template>
+      </BcAccordion>
+      <BcAccordion
+        v-if="validatorsOfflineReminder?.length"
+        :items="validatorsOfflineReminder"
+      >
+        <template #headingIcon>
+          <FontAwesomeIcon
+            :icon="faAlarmSnooze"
+            class="notifications-dashboard-dialog-entity__icon__red"
+          />
+        </template>
+        <template #heading>
+          {{ $t('notifications.dashboards.dialog.entity.validator_offline_reminder', [validatorsOfflineReminder?.length ?? 0]) }}
+        </template>
+        <template #item="{ item: validatorOfflineReminderIndex }">
+          <BcLink
+            :to="`/validator/${validatorOfflineReminderIndex}`"
+            class="link"
+          >
+            {{ validatorOfflineReminderIndex }}
+          </BcLink>
+        </template>
+      </BcAccordion>
+      <BcAccordion
+        v-if="groupsOfflineReminder?.length"
+        :items="groupsOfflineReminder"
+      >
+        <template #headingIcon>
+          <FontAwesomeIcon
+            :icon="faAlarmSnooze"
+            class="notifications-dashboard-dialog-entity__icon__red"
+          />
+        </template>
+        <template #heading>
+          {{ $t('notifications.dashboards.dialog.entity.group_offline_reminder', [groupsOfflineReminder?.length ?? 0]) }}
+        </template>
+        <template #item="{ item: groupOfflineReminder }">
+          {{ groupOfflineReminder.group_name }}
+          (<BcLink
+            class="link"
+            :to="`/dashboard/${groupOfflineReminder.dashboard_id}`"
+          >
+            <!--
+          this will remove white space in html
+          -->Dashboard {{ groupOfflineReminder.dashboard_id }}
+          </BcLink>)
+          <!--
+          this will remove white space in html
+          -->
+        </template>
+      </BcAccordion>
+      <BcAccordion
+        v-if="upcomingProposals?.length"
+        :items="upcomingProposals"
+      >
+        <template #headingIcon>
+          <FontAwesomeIcon
+            :icon="faCube"
+            class="notifications-dashboard-dialog-entity__icon__green"
+          />
+        </template>
+        <template #heading>
+          {{ $t('notifications.dashboards.dialog.entity.upcoming_proposal', [upcomingProposals?.length ?? 0]) }}
+        </template>
+        <template #item="{ item: upcomingProposal }">
+          <BcLink
+            class="link"
+            :to="`/validator/${upcomingProposal.index}`"
+          >
+            {{ upcomingProposal.index }}
+          </BcLink>
+          <template v-if="upcomingProposal.blocks.length">
+            [<BcLink
+              v-for="block in upcomingProposal.blocks"
+              :key="block"
+              :to="`/block/${block}`"
+              class="notifications-dashboard-dialog-entity__list-item link"
+            >
+              {{ block }}
+            </BcLink>]
+          </template>
+        </template>
+      </BcAccordion>
+      <BcAccordion
+        v-if="min_collateral?.length"
+        :items="min_collateral"
+      >
+        <template #headingIcon>
+          <FontAwesomeIcon
+            :icon="faRocket"
+            class="notifications-dashboard-dialog-entity__icon__red"
+          />
+        </template>
+        <template #heading>
+          {{ $t('notifications.dashboards.dialog.entity.min_collteral', [min_collateral?.length ?? 0]) }}
+        </template>
+        <template #item="{ item: minCollateral }">
+          <BcFormatHash
+            :ens="minCollateral.ens"
+            :hash="minCollateral.hash"
+            type="public_key"
+            no-copy
+            class="overwrite-block"
+          >
+            {{ minCollateral }}
+          </BcFormatHash>
+        </template>
+      </BcAccordion>
+      <BcAccordion
+        v-if="max_collateral?.length"
+        :items="max_collateral"
+      >
+        <template #headingIcon>
+          <FontAwesomeIcon
+            :icon="faRocket"
+            class="notifications-dashboard-dialog-entity__icon__green"
+          />
+        </template>
+        <template #heading>
+          {{ $t('notifications.dashboards.dialog.entity.max_collteral', [max_collateral?.length ?? 0]) }}
+        </template>
+        <template #item="{ item: maxCollateral }">
+          <BcFormatHash
+            :ens="maxCollateral.ens"
+            :hash="maxCollateral.hash"
+            type="public_key"
+            no-copy
+            class="overwrite-block"
+          >
+            {{ maxCollateral }}
+          </BcFormatHash>
+        </template>
+      </BcAccordion>
+    </main>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use '~/assets/css/breakpoints' as *;
+
+:deep(div.format-hash.overwrite-block) {
+  display: inline-flex
+}
+.notifications-dashboard-dialog-entity {
+  @media (min-width: $breakpoint-md) {
+    min-width: 42rem;
+  }
+}
+.notifications-dashboard-dialog-entity__header{
+  display: flex;
+  flex-direction: column;
+  gap: 0.938rem;
+}
+.notifications-dashboard-dialog-entity__content {
+  margin-top: 1.25rem;
+  display:flex;
+  flex-direction: column;
+  gap: 0.625rem;
+}
+.notifications-dashboard-dialog-entity__icon__green {
+  color: #7DC382;
+}
+.notifications-dashboard-dialog-entity__icon__red {
+  color: #F3454A;
+}
+.notifications-dashboard-dialog-entity__list-item:not(:last-child)::after {
+content: ', ';
+}
+</style>
diff --git a/frontend/components/notifications/NotificationsDashboardsTable.vue b/frontend/components/notifications/NotificationsDashboardsTable.vue
index f221486a7..51510411d 100644
--- a/frontend/components/notifications/NotificationsDashboardsTable.vue
+++ b/frontend/components/notifications/NotificationsDashboardsTable.vue
@@ -8,6 +8,7 @@ import type { DashboardType } from '~/types/dashboard'
 import { useUserDashboardStore } from '~/stores/dashboard/useUserDashboardStore'
 import type { ChainIDs } from '~/types/network'
 import type { NotificationDashboardsTableRow } from '~/types/api/notifications'
+import { NotificationsDashboardDialogEntity } from '#components'
 
 defineEmits<{ (e: 'openDialog'): void }>()
 
@@ -40,11 +41,6 @@ const colsVisible = computed(() => {
   }
 })
 
-const openDialog = () => {
-  // TODO: implement dialog
-  alert('not implemented yet 😪')
-}
-
 const getDashboardType = (isAccount: boolean): DashboardType => isAccount ? 'account' : 'validator'
 const { overview } = useNotificationsDashboardOverviewStore()
 const mapEventtypeToText = (eventType: NotificationDashboardsTableRow['event_types'][number]) => {
@@ -95,6 +91,20 @@ const mapEventtypeToText = (eventType: NotificationDashboardsTableRow['event_typ
 const textDashboardNotifications = (event_types: NotificationDashboardsTableRow['event_types']) => {
   return event_types.map(mapEventtypeToText).join(', ')
 }
+
+const dialog = useDialog()
+
+const showDialog = (row: { identifier: string } & NotificationDashboardsTableRow) => {
+  dialog.open(NotificationsDashboardDialogEntity, {
+    data: {
+      dashboard_id: row.dashboard_id,
+      epoch: row.epoch,
+      group_id: row.group_id,
+      group_name: row.group_name,
+      identifier: row.identifier,
+    },
+  })
+}
 </script>
 
 <template>
@@ -104,9 +114,6 @@ const textDashboardNotifications = (event_types: NotificationDashboardsTableRow[
       :search-placeholder="$t('notifications.dashboards.search_placeholder')"
       @set-search="setSearch"
     >
-      <template #header-left>
-        NETWORK_SWITCHER_COMPONENT
-      </template>
       <template #table>
         <ClientOnly fallback-tag="span">
           <BcTable
@@ -217,11 +224,15 @@ const textDashboardNotifications = (event_types: NotificationDashboardsTableRow[
                       }}
                     </span>
                   </template>
-                  <FontAwesomeIcon
-                    class="link"
-                    :icon="faArrowUpRightFromSquare"
-                    @click="openDialog"
-                  />
+                  <BcButtonIcon
+                    screenreader-text="Open notification details"
+                    @click="showDialog(slotProps.data)"
+                  >
+                    <FontAwesomeIcon
+                      class="link"
+                      :icon="faArrowUpRightFromSquare"
+                    />
+                  </BcButtonIcon>
                 </div>
               </template>
             </Column>
@@ -373,17 +384,6 @@ $breakpoint-lg: 1024px;
   @include utils.truncate-text;
 }
 
-:deep(.bc-table-header) {
-  .h1 {
-    display: none;
-  }
-
-  @media (min-width: $breakpoint-lg) {
-    .h1 {
-      display: block;
-    }
-  }
-}
 :deep(.right-info) {
   flex-direction: column;
   justify-content: center;
diff --git a/frontend/locales/en.json b/frontend/locales/en.json
index be4f6211d..50347c887 100644
--- a/frontend/locales/en.json
+++ b/frontend/locales/en.json
@@ -613,6 +613,25 @@
           "heading":"Delete all notifications",
           "paragraph": "Do you really want to delete all notifications for this dashboard?"
           },
+        "entity": {
+          "attestation_missed":"Attestation missed ({0})",
+          "group_back_online": "Group back online ({0})",
+          "group_offline": "Group Offline ({0})",
+          "group_offline_reminder": "Group Offline reminder ({0})",
+          "max_collteral":"Maximum Collateral reached ({0})",
+          "min_collteral":"Minimum Collateral reached ({0})",
+          "proposal_done": "Proposal done ({0})",
+          "proposal_missed": "Proposal missed ({0})",
+          "slashed": "Slashed ({0})",
+          "sync_comittee": "Synce Commitee ({0})",
+          "title": "Notifications",
+          "upcoming_proposal": "Upcoming proposal ({0})",
+          "validator_back_online": "Validator back online ({0})",
+          "validator_offline_reminder": "Validator Offline reminder ({0})",
+          "validatore_offline": "Validator Offline",
+          "withdrawal": "Withdrawal ({0})"
+
+        },
         "heading_webhook": "Edit Webhook",
         "info_send_via_discord": {
           "_link": "Discord webhook",
diff --git a/frontend/stores/notifications/useNotificationsDashboardDetailsStore.ts b/frontend/stores/notifications/useNotificationsDashboardDetailsStore.ts
new file mode 100644
index 000000000..c678c952a
--- /dev/null
+++ b/frontend/stores/notifications/useNotificationsDashboardDetailsStore.ts
@@ -0,0 +1,43 @@
+import type {
+  InternalGetUserNotificationsValidatorDashboardResponse,
+  NotificationDashboardsTableRow, NotificationValidatorDashboardDetail,
+} from '~/types/api/notifications'
+import { API_PATH } from '~/types/customFetch'
+
+export const useNotificationsDashboardDetailsStore = defineStore('notifications-dashboard-details', () => {
+  const { fetch } = useCustomFetch()
+  const detailsList = ref(new Map())
+
+  const getDetails = async ({
+    dashboard_id,
+    epoch,
+    group_id,
+  }: Pick<NotificationDashboardsTableRow, 'dashboard_id' | 'epoch' | 'group_id'>,
+  ) => {
+    return fetch<InternalGetUserNotificationsValidatorDashboardResponse>(
+      API_PATH.NOTIFICATIONS_DASHBOARDS_DETAILS_VALIDATOR,
+      {},
+      {
+        dashboard_id,
+        epoch,
+        group_id,
+      },
+    )
+  }
+
+  const addDetails = ({
+    details,
+    identifier,
+  }: {
+    details: NotificationValidatorDashboardDetail,
+    identifier: string,
+  }) => {
+    detailsList.value.set(identifier, details)
+  }
+
+  return {
+    addDetails,
+    detailsList,
+    getDetails,
+  }
+})
diff --git a/frontend/stores/notifications/useNotificationsDashboardStore.ts b/frontend/stores/notifications/useNotificationsDashboardStore.ts
index 41f392627..3a8e59fec 100644
--- a/frontend/stores/notifications/useNotificationsDashboardStore.ts
+++ b/frontend/stores/notifications/useNotificationsDashboardStore.ts
@@ -30,7 +30,8 @@ export function useNotificationsDashboardStore(networkId: globalThis.Ref<ChainID
     setStoredQuery,
   } = useTableQuery({
     limit: 10,
-    sort: 'timestamp:desc',
+    // isMocked: true,
+    sort: 'epoch:desc',
   }, 10)
   const isLoading = ref(false)
 
diff --git a/frontend/types/datatable.ts b/frontend/types/datatable.ts
index 463fdf042..e8477da55 100644
--- a/frontend/types/datatable.ts
+++ b/frontend/types/datatable.ts
@@ -4,8 +4,8 @@ export type SortOrder = -1 | 0 | 1 | null | undefined
 
 export type TableQueryParams = {
   cursor?: Cursor,
+  isMocked?: boolean,
   limit?: number,
-  mock?: boolean,
   order?: ColumnOrder,
   search?: string,
   sort?: string,