Index: src/main/resources/static/FlightSearch.html
===================================================================
--- src/main/resources/static/FlightSearch.html	(revision fda671c83bcf077a6425bb2a62c2d3325df6579e)
+++ src/main/resources/static/FlightSearch.html	(revision 8a947b9f7bb935744c30d9474c48253c28f6ffab)
@@ -10,4 +10,5 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
     <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css'>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
     <style>
         body {
@@ -212,4 +213,58 @@
             color:white;
         }
+
+        .notification-badge {
+            position: absolute;
+            top: 0;
+            right: 0;
+            background-color: red;
+            color: white;
+            border-radius: 50%;
+            padding: 0.3em;
+            font-size: 0.8em;
+        }
+
+        button i {
+            font-size: 24px;
+            color: #333;
+            position: relative;
+        }
+
+        .notifications-popup {
+            position: absolute;
+            top: 50px;
+            right: 0;
+            background: white;
+            border: 1px solid #ddd;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+            width: 300px;
+            max-height: 400px;
+            overflow-y: auto;
+            padding: 10px;
+            z-index: 9999;
+        }
+
+        .notifications-popup ul {
+            list-style-type: none;
+            padding: 0;
+        }
+
+        .notifications-popup li {
+            padding: 10px;
+            border-bottom: 1px solid #ddd;
+        }
+
+        .notifications-popup button {
+            background-color: #4CAF50; /* Green */
+            color: white;
+            padding: 10px;
+            border: none;
+            cursor: pointer;
+            margin-top: 10px;
+        }
+
+        .notifications-popup button:hover {
+            background-color: #45a049;
+        }
     </style>
 </head>
@@ -223,4 +278,9 @@
         <button @click="goToReports">Monthly Report</button>
         <button @click="home">Log Out</button>
+
+        <button @click="toggleNotifications">
+            <i class="fas fa-bell"></i>
+            <span v-if="unreadNotifications > 0" class="notification-badge">{{ unreadNotifications }}</span>
+        </button>
     </header>
 
@@ -291,4 +351,13 @@
         </div>
     </div>
+
+    <div v-if="notificationsVisible" class="notifications-popup">
+        <ul>
+            <li v-for="notification in notifications" :key="notification.message">
+                {{ notification.message }}
+            </li>
+        </ul>
+        <button @click="markAllAsRead">Mark All as Read</button>
+    </div>
 </div>
 
@@ -310,5 +379,8 @@
             issueDescription: '',
             userId:'',
-            wishlisted:false
+            wishlisted:false,
+            unreadNotifications: 0,
+            notifications: [],
+            notificationsVisible: false,
         },
         computed: {
@@ -319,4 +391,18 @@
 
         methods: {
+            toggleNotifications() {
+                this.notificationsVisible = !this.notificationsVisible;
+            },
+            fetchNotifications() {
+                console.log('Fetching notifications for userId:', this.userId);
+                axios.get(`/api/notifications/${this.userId}`)
+                    .then(response => {
+                        this.notifications = response.data;
+                        this.unreadNotifications = this.notifications.filter(n => !n.read).length;
+                    })
+                    .catch(error => {
+                        console.error('Error fetching notifications:', error);
+                    });
+            },
             async searchFlights() {
                 this.isContainerVisible = !this.isContainerVisible;
@@ -455,5 +541,5 @@
                     console.error("Error fetching flights", error);
                 });
-
+            this.fetchNotifications();
         }
     });
