Index: src/main/resources/static/FlightSearch.html
===================================================================
--- src/main/resources/static/FlightSearch.html	(revision 8a947b9f7bb935744c30d9474c48253c28f6ffab)
+++ src/main/resources/static/FlightSearch.html	(revision 3a749593fe57b29d0502b4b05f222bb26b82c2d2)
@@ -277,4 +277,5 @@
         <button @click="goToWishlistPage">🤍</button>
         <button @click="goToReports">Monthly Report</button>
+        <button @click="goToReviews">Reviews</button>
         <button @click="home">Log Out</button>
 
@@ -375,4 +376,5 @@
             places: [],
             bookings: [],
+            pastBookings: [],
             showReturnDate: false,
             showPopup: false,
@@ -528,4 +530,7 @@
                     console.error("Error fetching Destinations", error);
                 }
+            },
+            goToReviews(){
+                window.location.href = `/reviews?userId=${encodeURIComponent(this.userId)}`;
             }
         },
Index: src/main/resources/static/ReviewPage.html
===================================================================
--- src/main/resources/static/ReviewPage.html	(revision 8a947b9f7bb935744c30d9474c48253c28f6ffab)
+++ src/main/resources/static/ReviewPage.html	(revision 3a749593fe57b29d0502b4b05f222bb26b82c2d2)
@@ -7,5 +7,68 @@
     <link rel="stylesheet" href="/css/main.css">
     <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+    <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">
 </head>
+<style>
+    .popup-overlay {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: rgba(0, 0, 0, 0.7);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 1000;
+        overflow:hidden;
+    }
+
+    .popup textarea{
+        width: 100%;
+        padding: 10px;
+        margin-top: 10px;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+        resize: vertical;
+        box-sizing: border-box;
+    }
+
+    .popup {
+        background-color: white;
+        padding: 20px;
+        width: 300px;
+        border-radius: 10px;
+    }
+
+    .popup button {
+        margin-top: 10px;
+        background-color: rebeccapurple;
+        color: white;
+        border: none;
+        padding: 5px;
+        cursor: pointer;
+    }
+
+    .popup button:hover {
+        background-color: mediumpurple;
+    }
+
+    .popup select {
+        width: 100%;
+        padding: 8px;
+        margin: 10px 0;
+        border-radius: 4px;
+        border: 1px solid #ccc;
+    }
+
+    .popup select:focus {
+        outline: none;
+        border-color: #007bff;
+    }
+
+</style>
 <body>
 
@@ -13,4 +76,5 @@
     <header class="app-header">
         <button class="logout-btn" @click="logout">Log Out</button>
+        <button class="logout-btn" @click="leaveReview">Leave a review</button>
     </header>
 
@@ -20,10 +84,32 @@
 
             <div class="review-list">
-                <div v-for="review in reviews" :key="review.id" class="review-item">
-                    <h3>{{ review.subject }}</h3>
-                    <p>{{ review.description }}</p>
-                    <span>{{ review.date }}</span>
+                <div v-for="review in reviews" :key="review.reviewid" class="review-item">
+                    <h3>{{ review.date }}</h3>
+                    <p>{{ review.reviewComment }}</p>
+                    <span>{{ review.rating }}</span>
                 </div>
             </div>
+        </div>
+    </div>
+</div>
+
+<div v-if="showPopup" class="popup-overlay">
+    <div class="popup">
+        <h3>Leave a review</h3>
+
+        <select v-model="selectedFlightNumber" id="flights">
+            <option value="" disabled selected>Select a flight</option>
+            <option v-for="flight in flights" :key="flight.flightNumber" :value="flight.flightNumber">
+                {{ flight.flightNumber }}
+            </option>
+        </select>
+
+        <textarea v-model="reviewComment" placeholder="Leave a comment here..." rows="5"></textarea>
+
+        <textarea v-model="rating" placeholder="Rate 1-5" rows="1"></textarea>
+
+        <div class="popup-actions">
+            <button @click="submitReview" class="submit-btn">Submit</button>
+            <button @click="closePopup" class="cancel-btn">Cancel</button>
         </div>
     </div>
@@ -34,38 +120,65 @@
         el: '#app',
         data: {
-            reviews: [
-                {
-                    id: 1,
-                    subject: 'Great experience!',
-                    description: 'The flight was amazing, the service was excellent, and the views were breathtaking.',
-                    date: '2025-02-01',
-                },
-                {
-                    id: 2,
-                    subject: 'Good but delayed',
-                    description: 'The flight was comfortable, but it was delayed by two hours, which caused some inconvenience.',
-                    date: '2025-02-02',
-                },
-                {
-                    id: 3,
-                    subject: 'Okay, but not perfect',
-                    description: 'Everything was fine, but the food options could have been better.',
-                    date: '2025-02-03',
-                },
-            ]
+            userId: '',
+            reviews: [],
+            showPopup: false,
+            reviewComment: '',
+            rating: '',
+            flights: [],
+            selectedFlightNumber: ''
         },
         methods: {
             logout() {
                 window.location.href = '/';
+            },
+            async fetchReviews() {
+                try {
+                    const response = await axios.get("api/reviews");
+                    this.reviews = response.data;
+                } catch (error) {
+                    console.error(error);
+                }
+            },
+            leaveReview() {
+                this.showPopup = true;
+            },
+            closePopup() {
+                this.showPopup = false;
+            },
+            submitReview() {
+                if (this.reviewComment.trim() && this.selectedFlightNumber) {
+                    const reviewData = {
+                        userId: this.userId,
+                        flightNumber: this.selectedFlightNumber,
+                        reviewComment: this.reviewComment,
+                        rating: this.rating
+                    };
+
+                    axios.post('/api/reviews', reviewData)
+                        .then(response => {
+                            alert("Review added successfully!");
+                            this.closePopup();
+                        })
+                        .catch(error => {
+                            console.error("Error submitting review:", error);
+                            alert("There was an error submitting your review. Please try again.");
+                        });
+                }
+            },
+            async fetchFlights() {
+                try {
+                    const response = await axios.get('/api/flights');
+                    this.flights = response.data;
+                    console.log(this.flights);
+                } catch (error) {
+                    console.error('Error fetching flights:', error);
+                }
             }
         },
         mounted() {
-            axios.get('api/reviews')
-                .then(response => {
-                    this.review = response.data;
-                })
-                .catch(error => {
-                    console.error("Error fetching reviews", error);
-                });
+            const params = new URLSearchParams(window.location.search);
+            this.userId = params.get("userId");
+            this.fetchReviews();
+            this.fetchFlights();
         }
     });
