diff --git a/runtime/dapp-frontend-vue/src/components/Notifications/Notifications.scss b/runtime/dapp-frontend-vue/src/components/Notifications/Notifications.scss
new file mode 100644
index 00000000..eebb778b
--- /dev/null
+++ b/runtime/dapp-frontend-vue/src/components/Notifications/Notifications.scss
@@ -0,0 +1,72 @@
+/**
+ * This file is part of dHealth dApps Framework shared under LGPL-3.0
+ * Copyright (C) 2022-present dHealth Network, All rights reserved.
+ *
+ * @package dHealth dApps Framework
+ * @subpackage Vue Frontend
+ * @author dHealth Network
+ * @license LGPL-3.0
+ */
+
+ @import "../../vars.scss";
+
+ .dapp-notifications {
+ cursor: pointer;
+ display: inline-block;
+ margin-right: 10px;
+ position: relative;
+
+ &__list {
+ position: absolute;
+ top: 100%;
+ right: 0;
+ width: 326px;
+ background-color: $base-grey-balance;
+ padding: 34px 25px 24px 25px;
+ box-shadow: 3px 3px 0px $black;
+ border: 1px solid $black;
+ border-radius: 8px;
+ text-align: left;
+
+ .notification-item {
+ padding-bottom: 11px;
+ margin-bottom: 8px;
+ border-bottom: 1px solid $notifications-border-grey;
+
+ &:last-child {
+ border-bottom: none;
+ padding-bottom: 0;
+ margin-bottom: 0;
+ }
+
+ h3 {
+ font-size: 13px;
+ font-weight: 700;
+ font-size: 13px;
+ line-height: 130%;
+ }
+
+ p {
+ font-weight: 400;
+ font-size: 11px;
+ line-height: 130%;
+ }
+
+ .icon-wrapper {
+ flex: 1 0 44px;
+ }
+
+ .state {
+ text-align: center;
+
+ .unread-circle {
+ width: 6px;
+ height: 6px;
+ display: inline-block;
+ border-radius: 50%;
+ background-color: $grey-system-dark;
+ }
+ }
+ }
+ }
+ }
\ No newline at end of file
diff --git a/runtime/dapp-frontend-vue/src/components/Notifications/Notifications.ts b/runtime/dapp-frontend-vue/src/components/Notifications/Notifications.ts
new file mode 100644
index 00000000..e163e091
--- /dev/null
+++ b/runtime/dapp-frontend-vue/src/components/Notifications/Notifications.ts
@@ -0,0 +1,91 @@
+/**
+ * This file is part of dHealth dApps Framework shared under LGPL-3.0
+ * Copyright (C) 2022-present dHealth Network, All rights reserved.
+ *
+ * @package dHealth dApps Framework
+ * @subpackage Vue Frontend
+ * @author dHealth Network
+ * @license LGPL-3.0
+ */
+// external dependencies
+import { Component, Prop } from "vue-property-decorator";
+import InlineSvg from "vue-inline-svg";
+
+// internal dependencies
+import { MetaView } from "@/views/MetaView";
+import { MedalItem } from "../RewardsList/RewardsList";
+
+// style resource
+import "./Notifications.scss";
+
+export interface Notification {
+ createdAt: string | number;
+ title: string;
+ description: string;
+ icon: string;
+ viewed: boolean;
+ medal?: MedalItem;
+ id: number | string;
+}
+
+/*
+ * @class Notifications
+ * @description This class implements a Vue component to display
+ * latest notifications received by user
+ *
+ * @since v0.3.0
+ */
+@Component({
+ components: {
+ InlineSvg,
+ },
+ methods: {},
+ computed: {},
+})
+export default class Notifications extends MetaView {
+ /**
+ * Prop which defines items for available notifications.
+ *
+ * @access protected
+ * @var {Notification[]}
+ */
+ @Prop({ default: () => [] }) protected items?: Notification[];
+
+ isOpen = false;
+
+ /**
+ * This computed checks if list contains
+ * item with "viewed: false" prop.
+ *
+ * @access protected
+ * @returns boolean
+ */
+ public get unreadExist(): boolean {
+ const unread = this.items?.filter(
+ (notification: Notification) => notification.viewed === true
+ );
+ return !!unread && unread.length > 0;
+ }
+
+ public viewNotification(medalNotification: Notification) {
+ this.$emit("notification-viewed", medalNotification);
+ if (medalNotification.medal) {
+ const relatedMedal = medalNotification.medal;
+ this.$root.$emit("modal", {
+ type: "medal",
+ overlayColor: "rgba(0, 0, 0, 0.2)",
+ width: 720,
+ modalBg: "#FFFFFF",
+ medal: relatedMedal.image,
+ condition: relatedMedal.condition,
+ activities: relatedMedal.relatedActivities,
+ });
+ }
+ }
+
+ hideNotifications() {
+ if (this.isOpen) {
+ this.isOpen = false;
+ }
+ }
+}
diff --git a/runtime/dapp-frontend-vue/src/components/Notifications/Notifications.vue b/runtime/dapp-frontend-vue/src/components/Notifications/Notifications.vue
new file mode 100644
index 00000000..98611c12
--- /dev/null
+++ b/runtime/dapp-frontend-vue/src/components/Notifications/Notifications.vue
@@ -0,0 +1,58 @@
+
+
+
+
+
![New notifications available]()
+
![No new notifications]()
+
+
+
+
+
+
+
+
![]()
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Share
![Share]()
+
+
+
+
+
+
![]()
+
+
+
+ {{ medal.condition }}
+
+
+
+