Index: src/main/java/com/example/skychasemk/controller/ReviewController.java
===================================================================
--- src/main/java/com/example/skychasemk/controller/ReviewController.java	(revision 3d609327dbace888fbc6a057dfb4b5c624b18c15)
+++ src/main/java/com/example/skychasemk/controller/ReviewController.java	(revision a70b5a40a9534d47aad3a99f7470481b67596179)
@@ -3,4 +3,5 @@
 import com.example.skychasemk.dto.ReviewDTO;
 import com.example.skychasemk.model.Review;
+import com.example.skychasemk.repository.ReviewRepository;
 import com.example.skychasemk.services.ReviewService;
 import org.springframework.beans.factory.annotation.Autowired;
@@ -17,4 +18,6 @@
     @Autowired
     private ReviewService reviewService;
+    @Autowired
+    private ReviewRepository reviewRepository;
 
     // Get all reviews
@@ -22,4 +25,10 @@
     public List<Review> getAllReviews() {
         return reviewService.getAllReviews();
+    }
+
+
+    @GetMapping("/{flightId}")
+    public List<Review> getReviewsByFlightId(@PathVariable("flightId") Integer flightId) {
+        return reviewRepository.findReviews(flightId);
     }
 
Index: src/main/java/com/example/skychasemk/controller/TopMonthlyReportController.java
===================================================================
--- src/main/java/com/example/skychasemk/controller/TopMonthlyReportController.java	(revision a70b5a40a9534d47aad3a99f7470481b67596179)
+++ src/main/java/com/example/skychasemk/controller/TopMonthlyReportController.java	(revision a70b5a40a9534d47aad3a99f7470481b67596179)
@@ -0,0 +1,31 @@
+package com.example.skychasemk.controller;
+
+import com.example.skychasemk.model.TopMonthlyReport;
+import com.example.skychasemk.services.TopMonthlyReportService;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.web.bind.annotation.*;
+
+import java.time.LocalDate;
+import java.util.List;
+
+@RestController
+@RequestMapping("/api/reports")
+@CrossOrigin("*")
+public class TopMonthlyReportController {
+    @Autowired
+    private TopMonthlyReportService service;
+    @GetMapping
+    public String getReportsPage() {
+        return "TopMonthlyReport";
+    }
+
+    @GetMapping("/top-monthly")
+    public List<TopMonthlyReport> getAllReports() {
+        return service.getAllReports();
+    }
+
+    @GetMapping("/top-monthly/{month}")
+    public List<TopMonthlyReport> getReportsByMonth(@PathVariable String month) {
+        return service.getReportsByMonth(LocalDate.parse(month));
+    }
+}
Index: src/main/java/com/example/skychasemk/model/TopMonthlyReport.java
===================================================================
--- src/main/java/com/example/skychasemk/model/TopMonthlyReport.java	(revision a70b5a40a9534d47aad3a99f7470481b67596179)
+++ src/main/java/com/example/skychasemk/model/TopMonthlyReport.java	(revision a70b5a40a9534d47aad3a99f7470481b67596179)
@@ -0,0 +1,58 @@
+package com.example.skychasemk.model;
+
+import jakarta.persistence.Column;
+import jakarta.persistence.Entity;
+import jakarta.persistence.Id;
+import jakarta.persistence.Table;
+
+import java.time.LocalDate;
+
+@Entity
+@Table(name="topmonhtlyreport")
+public class TopMonthlyReport {
+    @Id
+    @Column(name = "month")
+    private LocalDate month;
+
+    @Column(name = "category")
+    private String category;
+
+    @Column(name = "name")
+    private String name;
+
+    @Column(name = "count")
+    private int count;
+
+    // Getters and Setters
+    public LocalDate getMonth() {
+        return month;
+    }
+
+    public void setMonth(LocalDate month) {
+        this.month = month;
+    }
+
+    public String getCategory() {
+        return category;
+    }
+
+    public void setCategory(String category) {
+        this.category = category;
+    }
+
+    public String getName() {
+        return name;
+    }
+
+    public void setName(String name) {
+        this.name = name;
+    }
+
+    public int getCount() {
+        return count;
+    }
+
+    public void setCount(int count) {
+        this.count = count;
+    }
+}
Index: src/main/java/com/example/skychasemk/repository/ReviewRepository.java
===================================================================
--- src/main/java/com/example/skychasemk/repository/ReviewRepository.java	(revision 3d609327dbace888fbc6a057dfb4b5c624b18c15)
+++ src/main/java/com/example/skychasemk/repository/ReviewRepository.java	(revision a70b5a40a9534d47aad3a99f7470481b67596179)
@@ -4,4 +4,5 @@
 import org.springframework.data.jpa.repository.JpaRepository;
 import org.springframework.data.jpa.repository.Query;
+import org.springframework.data.repository.query.Param;
 
 import java.util.List;
@@ -9,5 +10,5 @@
 public interface ReviewRepository extends JpaRepository<Review, Integer> {
     @Query("SELECT r from Review r where r.targetID = :flightId")
-    List<Review> findReviews();
+    List<Review> findReviews(@Param("flightId") Integer flightId);
 }
 
Index: src/main/java/com/example/skychasemk/repository/TopMonthlyReportRepository.java
===================================================================
--- src/main/java/com/example/skychasemk/repository/TopMonthlyReportRepository.java	(revision a70b5a40a9534d47aad3a99f7470481b67596179)
+++ src/main/java/com/example/skychasemk/repository/TopMonthlyReportRepository.java	(revision a70b5a40a9534d47aad3a99f7470481b67596179)
@@ -0,0 +1,13 @@
+package com.example.skychasemk.repository;
+
+import com.example.skychasemk.model.TopMonthlyReport;
+import org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.stereotype.Repository;
+
+import java.time.LocalDate;
+import java.util.List;
+
+@Repository
+public interface TopMonthlyReportRepository extends JpaRepository<TopMonthlyReport, LocalDate> {
+    List<TopMonthlyReport> findByMonth(LocalDate month);
+}
Index: src/main/java/com/example/skychasemk/services/ReviewService.java
===================================================================
--- src/main/java/com/example/skychasemk/services/ReviewService.java	(revision 3d609327dbace888fbc6a057dfb4b5c624b18c15)
+++ src/main/java/com/example/skychasemk/services/ReviewService.java	(revision a70b5a40a9534d47aad3a99f7470481b67596179)
@@ -18,5 +18,5 @@
 
     public List<Review> getAllReviews() {
-        return reviewRepository.findReviews();
+        return reviewRepository.findAll();
     }
 
Index: src/main/java/com/example/skychasemk/services/TopMonthlyReportService.java
===================================================================
--- src/main/java/com/example/skychasemk/services/TopMonthlyReportService.java	(revision a70b5a40a9534d47aad3a99f7470481b67596179)
+++ src/main/java/com/example/skychasemk/services/TopMonthlyReportService.java	(revision a70b5a40a9534d47aad3a99f7470481b67596179)
@@ -0,0 +1,23 @@
+package com.example.skychasemk.services;
+
+import com.example.skychasemk.model.TopMonthlyReport;
+import com.example.skychasemk.repository.TopMonthlyReportRepository;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Service;
+
+import java.time.LocalDate;
+import java.util.List;
+
+@Service
+public class TopMonthlyReportService {
+    @Autowired
+    private TopMonthlyReportRepository repository;
+
+    public List<TopMonthlyReport> getAllReports() {
+        return repository.findAll();
+    }
+
+    public List<TopMonthlyReport> getReportsByMonth(LocalDate month) {
+        return repository.findByMonth(month);
+    }
+}
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: c/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>
Index: src/main/resources/templates/WishlistPage.html
===================================================================
--- src/main/resources/templates/WishlistPage.html	(revision a70b5a40a9534d47aad3a99f7470481b67596179)
+++ src/main/resources/templates/WishlistPage.html	(revision a70b5a40a9534d47aad3a99f7470481b67596179)
@@ -0,0 +1,93 @@
+<!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.id}`;
+            },
+            logout() {
+                window.location.href = '/';
+            }
+        }
+    });
+</script>
+
+</body>
+</html>