Index: src/main/resources/static/ReviewPage.html
===================================================================
--- src/main/resources/static/ReviewPage.html	(revision 3d609327dbace888fbc6a057dfb4b5c624b18c15)
+++ src/main/resources/static/ReviewPage.html	(revision a70b5a40a9534d47aad3a99f7470481b67596179)
@@ -20,7 +20,7 @@
 
             <div class="review-list">
-                <div v-for="review in reviews" :key="review.reviewid" class="review-item">
-                    <h3>Description</h3>
-                    <p>{{ review.review_comment }}</p>
+                <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>
@@ -29,11 +29,29 @@
     </div>
 </div>
-<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>
+
 <script>
     new Vue({
         el: '#app',
         data: {
-            reviews: []
+            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',
+                },
+            ]
         },
         methods: {
@@ -45,6 +63,5 @@
             axios.get('api/reviews')
                 .then(response => {
-                    this.reviews = response.data;
-                    console.log(response.data);
+                    this.review = response.data;
                 })
                 .catch(error => {
Index: src/main/resources/static/TopMonthlyReport.html
===================================================================
--- src/main/resources/static/TopMonthlyReport.html	(revision a70b5a40a9534d47aad3a99f7470481b67596179)
+++ src/main/resources/static/TopMonthlyReport.html	(revision a70b5a40a9534d47aad3a99f7470481b67596179)
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Top Monthly Reports</title>
+    <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>
+</head>
+<body>
+<div id="app" class="reports">
+    <h2>Top Monthly Reports</h2>
+
+    <label for="month">Select Month:</label>
+    <input type="month" v-model="selectedMonth" @change="fetchReports" />
+
+    <div v-if="loading">Loading...</div>
+    <div v-else>
+        <h3>Top Destinations, Flights, and Airports</h3>
+        <table>
+            <thead>
+            <tr>
+                <th>Month</th>
+                <th>Category</th>
+                <th>Name</th>
+                <th>Count</th>
+            </tr>
+            </thead>
+            <tbody>
+            <tr v-for="report in reports" :key="report.month + report.name">
+                <td>{{ report.month }}</td>
+                <td>{{ report.category }}</td>
+                <td>{{ report.name }}</td>
+                <td>{{ report.count }}</td>
+            </tr>
+            </tbody>
+        </table>
+    </div>
+</div>
+
+<script>
+    new Vue({
+        el: '#app',
+        data: {
+            reports: [],
+            selectedMonth: '', // YYYY-MM format
+            loading: false
+        },
+        methods: {
+            async fetchReports() {
+                this.loading = true;
+                try {
+                    const monthFormatted = this.selectedMonth + "-01";
+                    const response = await axios.get(`http://localhost:8080/api/reports/top-monthly/${monthFormatted}`);
+                    this.reports = response.data;
+                } catch (error) {
+                    console.error("Error fetching reports:", error);
+                } finally {
+                    this.loading = false;
+                }
+            }
+        }
+    });
+</script>
+</body>
+</html>
Index: src/main/resources/static/WishlistPage.html
===================================================================
--- src/main/resources/static/WishlistPage.html	(revision 3d609327dbace888fbc6a057dfb4b5c624b18c15)
+++ 	(revision )
@@ -1,93 +1,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Wishlist</title>
-    <link rel="stylesheet" href="/css/main.css">
-    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
-</head>
-<body>
-
-<div id="app" class="wishlist-page">
-    <header class="app-header">
-        <button class="logout-btn" @click="logout">Log Out</button>
-    </header>
-
-    <div class="main-content">
-        <div class="wishlist-container">
-            <h1>Your Wishlist</h1>
-
-            <div class="wishlist-list">
-                <div class="wishlist-item"
-                     v-for="flight in wishlistedFlights"
-                     :key="flight.id">
-                    <input type="checkbox"
-                           v-model="flight.selected"
-                           :id="'flight-' + flight.id" />
-                    <span>{{ flight.destination }} - {{ flight.date }} - ${{ flight.price }}</span>
-
-                    <button @click="showReviews(flight)" class="show-reviews-btn">
-                        Show Reviews
-                    </button>
-                </div>
-            </div>
-
-            <button v-if="selectedFlights.length" @click="showBookingModal" class="book-btn">
-                Book Selected Flights
-            </button>
-        </div>
-    </div>
-
-    <div v-if="showModal" class="modal-overlay">
-        <div class="modal">
-            <h3>Are you sure you want to book the selected flights?</h3>
-            <div class="modal-actions">
-                <button @click="confirmBooking" class="confirm-btn">Confirm</button>
-                <button @click="cancelBooking" class="cancel-btn">Cancel</button>
-            </div>
-        </div>
-    </div>
-</div>
-
-<script>
-    new Vue({
-        el: '#app',
-        data: {
-            flights: [
-                { id: 1, destination: 'New York', date: '2025-03-01', price: 200, selected: false, wishlisted: true },
-                { id: 2, destination: 'London', date: '2025-03-10', price: 250, selected: false, wishlisted: true },
-                { id: 3, destination: 'Paris', date: '2025-03-15', price: 300, selected: false, wishlisted: true },
-            ],
-            showModal: false
-        },
-        computed: {
-            wishlistedFlights() {
-                return this.flights.filter(flight => flight.wishlisted);
-            },
-            selectedFlights() {
-                return this.wishlistedFlights.filter(flight => flight.selected);
-            }
-        },
-        methods: {
-            showBookingModal() {
-                this.showModal = true;
-            },
-            confirmBooking() {
-                window.location.href = '/transaction';
-            },
-            cancelBooking() {
-                this.showModal = false;
-            },
-            showReviews(flight) {
-                window.location.href = `/reviews?flightId=${flight.flightid}`;
-            },
-            logout() {
-                window.location.href = '/';
-            }
-        }
-    });
-</script>
-
-</body>
-</html>
