Index: src/main/java/com/example/skychasemk/controller/TopMonthlyReportController.java
===================================================================
--- src/main/java/com/example/skychasemk/controller/TopMonthlyReportController.java	(revision de83113e09d4c6a32e066d85e3adf027088a2433)
+++ src/main/java/com/example/skychasemk/controller/TopMonthlyReportController.java	(revision 62bba0c73980e31e95db489d91493dc186ed2439)
@@ -2,30 +2,22 @@
 
 import com.example.skychasemk.model.TopMonthlyReport;
-import com.example.skychasemk.services.TopMonthlyReportService;
+import com.example.skychasemk.repository.TopMonthlyReportRepository;
 import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.ui.Model;
 import org.springframework.web.bind.annotation.*;
 
-import java.time.LocalDate;
 import java.util.List;
 
 @RestController
-@RequestMapping("/api/reports")
-@CrossOrigin("*")
+@RequestMapping("/api/views")
 public class TopMonthlyReportController {
     @Autowired
-    private TopMonthlyReportService service;
+    private TopMonthlyReportRepository repository;
+
+
     @GetMapping
-    public String getReportsPage() {
-        return "TopMonthlyReport";
+    public List<TopMonthlyReport> getAllReports() {
+        return repository.findAll();
     }
 
-    @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/controller/WishlistController.java
===================================================================
--- src/main/java/com/example/skychasemk/controller/WishlistController.java	(revision de83113e09d4c6a32e066d85e3adf027088a2433)
+++ src/main/java/com/example/skychasemk/controller/WishlistController.java	(revision 62bba0c73980e31e95db489d91493dc186ed2439)
@@ -18,5 +18,5 @@
     private WishlistService wishlistService;
 
-    @GetMapping("/wishlists-all")
+    @GetMapping
     public List<Wishlist> getAllWishlists() {
         return wishlistService.getAllWishlists();
@@ -27,7 +27,13 @@
     }
 
-    @DeleteMapping("/wishlist/{id}")
-    public void deleteWishlist(@PathVariable("id") Integer wishlistID) {
-        wishlistService.deleteWishlist(wishlistID);
+    @DeleteMapping
+    public void deleteWishlist(@RequestParam("userId") Integer userId, @RequestParam("targetId") Integer targetId) {
+        wishlistService.deleteRecordFromWishlist(userId, targetId);
+    }
+
+    @GetMapping("/{userId}")
+    public ResponseEntity<List<Wishlist>> getWishlist(@RequestParam("userId") Long userId) {
+        List<Wishlist> wishlist = wishlistService.getAllItems(userId);
+        return ResponseEntity.ok(wishlist);
     }
 
Index: src/main/java/com/example/skychasemk/dto/SupportTicketDTO.java
===================================================================
--- src/main/java/com/example/skychasemk/dto/SupportTicketDTO.java	(revision de83113e09d4c6a32e066d85e3adf027088a2433)
+++ src/main/java/com/example/skychasemk/dto/SupportTicketDTO.java	(revision 62bba0c73980e31e95db489d91493dc186ed2439)
@@ -1,3 +1,6 @@
 package com.example.skychasemk.dto;
+
+import lombok.Getter;
+import lombok.Setter;
 
 import java.time.LocalDate;
@@ -5,6 +8,9 @@
 public class SupportTicketDTO {
 
+    // Getters and Setters
+    @Setter
+    @Getter
     private Integer ticketID;
-    private Integer userID;
+    private Integer userId;
     private String subject;
     private String description;
@@ -20,19 +26,10 @@
     }
 
-    // Getters and Setters
-    public Integer getTicketID() {
-        return ticketID;
+    public Integer getUserId() {
+        return userId;
     }
 
-    public void setTicketID(Integer ticketID) {
-        this.ticketID = ticketID;
-    }
-
-    public Integer getUserID() {
-        return userID;
-    }
-
-    public void setUserID(Integer userID) {
-        this.userID = userID;
+    public void setUserId(Integer userId) {
+        this.userId = userId;
     }
 
Index: src/main/java/com/example/skychasemk/dto/WishlistDTO.java
===================================================================
--- src/main/java/com/example/skychasemk/dto/WishlistDTO.java	(revision de83113e09d4c6a32e066d85e3adf027088a2433)
+++ src/main/java/com/example/skychasemk/dto/WishlistDTO.java	(revision 62bba0c73980e31e95db489d91493dc186ed2439)
@@ -1,32 +1,30 @@
 package com.example.skychasemk.dto;
+
+import lombok.Getter;
+import lombok.Setter;
 
 public class WishlistDTO {
 
-    private Integer userID;
-    private Integer targetID;
+    private Integer userId;
+    private Integer targetId;
+    @Setter
+    @Getter
     private boolean wishlisted;
 
     public Integer getUserID() {
-        return userID;
+        return userId;
     }
 
     public void setUserID(Integer userID) {
-        this.userID = userID;
+        this.userId = userID;
     }
 
     public Integer getTargetID() {
-        return targetID;
+        return targetId;
     }
 
     public void setTargetID(Integer targetID) {
-        this.targetID = targetID;
+        this.targetId = targetID;
     }
 
-    public boolean isWishlisted() {
-        return wishlisted;
-    }
-
-    public void setWishlisted(boolean wishlisted) {
-        this.wishlisted = wishlisted;
-    }
 }
Index: src/main/java/com/example/skychasemk/model/SupportTicket.java
===================================================================
--- src/main/java/com/example/skychasemk/model/SupportTicket.java	(revision de83113e09d4c6a32e066d85e3adf027088a2433)
+++ src/main/java/com/example/skychasemk/model/SupportTicket.java	(revision 62bba0c73980e31e95db489d91493dc186ed2439)
@@ -3,4 +3,5 @@
 import jakarta.persistence.*;
 import lombok.Getter;
+import lombok.Setter;
 
 import java.time.LocalDate;
@@ -10,4 +11,5 @@
 public class SupportTicket {
 
+    @Setter
     @Id
     @GeneratedValue(strategy = GenerationType.IDENTITY)
@@ -15,24 +17,31 @@
 
     private Integer ticketID;
+    @Setter
     @Getter
-    @Column(name = "UserID")
+    @Column(name = "userid")
 
-    private Integer userID;
+    private Integer userId;
 
+    @Setter
     @Getter
     @Column(name = "Description")
 
     private String description;
+    @Setter
+
     @Getter
     @Column(name = "status")
     @Enumerated(EnumType.STRING)
     private TicketStatus status;
+    @Setter
     @Column(name = "date_created")
 
     private LocalDate dateCreated;
+    @Setter
     @Getter
     @Column(name = "date_resolved")
 
     private LocalDate dateResolved;
+    @Setter
     @Column(name = "assigned_to")
 
@@ -44,28 +53,4 @@
     }
 
-    public TicketStatus getStatus() {
-        return status;
-    }
-
-    public Integer getTicketID() {
-        return ticketID;
-    }
-
-    public void setTicketID(Integer ticketID) {
-        this.ticketID = ticketID;
-    }
-
-    public void setUserID(Integer userID) {
-        this.userID = userID;
-    }
-
-
-    public void setDescription(String description) {
-        this.description = description;
-    }
-
-    public void setStatus(TicketStatus status) {
-        this.status = status;
-    }
 
     public LocalDate getDateCreated(LocalDate now) {
@@ -73,14 +58,3 @@
     }
 
-    public void setDateCreated(LocalDate dateCreated) {
-        this.dateCreated = dateCreated;
-    }
-
-    public void setDateResolved(LocalDate dateResolved) {
-        this.dateResolved = dateResolved;
-    }
-
-    public void setAssignedTo(Integer assignedTo) {
-        this.assignedTo = assignedTo;
-    }
 }
Index: src/main/java/com/example/skychasemk/model/TopMonthlyReport.java
===================================================================
--- src/main/java/com/example/skychasemk/model/TopMonthlyReport.java	(revision de83113e09d4c6a32e066d85e3adf027088a2433)
+++ src/main/java/com/example/skychasemk/model/TopMonthlyReport.java	(revision 62bba0c73980e31e95db489d91493dc186ed2439)
@@ -1,58 +1,29 @@
 package com.example.skychasemk.model;
 
-import jakarta.persistence.Column;
-import jakarta.persistence.Entity;
-import jakarta.persistence.Id;
-import jakarta.persistence.Table;
+import jakarta.persistence.*;
+import lombok.Getter;
+import lombok.Setter;
+import org.hibernate.annotations.Immutable;
 
 import java.time.LocalDate;
-
+@Setter
+@Getter
 @Entity
 @Table(name="topmonhtlyreport")
+@IdClass(TopMonthlyReportId.class) // Define composite key
+
 public class TopMonthlyReport {
+    // Getters and Setters
     @Id
     @Column(name = "month")
     private LocalDate month;
-
+    @Id
     @Column(name = "category")
     private String category;
-
+    @Id
     @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/model/TopMonthlyReportId.java
===================================================================
--- src/main/java/com/example/skychasemk/model/TopMonthlyReportId.java	(revision 62bba0c73980e31e95db489d91493dc186ed2439)
+++ src/main/java/com/example/skychasemk/model/TopMonthlyReportId.java	(revision 62bba0c73980e31e95db489d91493dc186ed2439)
@@ -0,0 +1,34 @@
+package com.example.skychasemk.model;
+
+import java.io.Serializable;
+import java.time.LocalDate;
+import java.util.Objects;
+
+public class TopMonthlyReportId implements Serializable {
+    private LocalDate month;
+    private String category;
+    private String name;
+
+    public TopMonthlyReportId() {}
+
+    public TopMonthlyReportId(LocalDate month, String category, String name) {
+        this.month = month;
+        this.category = category;
+        this.name = name;
+    }
+
+    @Override
+    public boolean equals(Object o) {
+        if (this == o) return true;
+        if (o == null || getClass() != o.getClass()) return false;
+        TopMonthlyReportId that = (TopMonthlyReportId) o;
+        return Objects.equals(month, that.month) &&
+                Objects.equals(category, that.category) &&
+                Objects.equals(name, that.name);
+    }
+
+    @Override
+    public int hashCode() {
+        return Objects.hash(month, category, name);
+    }
+}
Index: src/main/java/com/example/skychasemk/model/WebConfig.java
===================================================================
--- src/main/java/com/example/skychasemk/model/WebConfig.java	(revision de83113e09d4c6a32e066d85e3adf027088a2433)
+++ src/main/java/com/example/skychasemk/model/WebConfig.java	(revision 62bba0c73980e31e95db489d91493dc186ed2439)
@@ -34,6 +34,7 @@
         registry.addViewController("/transaction").setViewName("forward:/TransactionPage.html");
         registry.addViewController("/login").setViewName("forward:/UserLogin.html");
-        registry.addViewController("/wishlist").setViewName("forward:/WishlistPage.html");
+        registry.addViewController("/wishlist").setViewName("forward:/Wishlist.html");
         registry.addViewController("/signup").setViewName("forward:/UserSignup.html");
+        registry.addViewController("/views").setViewName("forward:/ViewReport.html");
     }
 
Index: src/main/java/com/example/skychasemk/model/Wishlist.java
===================================================================
--- src/main/java/com/example/skychasemk/model/Wishlist.java	(revision de83113e09d4c6a32e066d85e3adf027088a2433)
+++ src/main/java/com/example/skychasemk/model/Wishlist.java	(revision 62bba0c73980e31e95db489d91493dc186ed2439)
@@ -3,4 +3,5 @@
 import jakarta.persistence.*;
 import lombok.Getter;
+import lombok.Setter;
 
 import java.time.LocalDate;
@@ -16,45 +17,18 @@
 
     private Integer wishlistID;
-    @Column(name = "userId")
+    @Setter
+    @Column(name = "userid")
 
-    private Integer userID;
-    @Column(name = "targetId")
+    private Integer userId;
+    @Setter
+    @Column(name = "targetid")
 
-    private Integer targetID;
+    private Integer targetId;
+    @Setter
+    @Getter
     @Column(name = "date_added")
+    private LocalDate date_added;
 
-    private LocalDate dateAdded;
 
-    public Integer getWishlistID() {
-        return wishlistID;
-    }
-
-    public void setWishlistID(Integer wishlistID) {
-        this.wishlistID = wishlistID;
-    }
-
-    public Integer getUserID() {
-        return userID;
-    }
-
-    public void setUserID(Integer userID) {
-        this.userID = userID;
-    }
-
-    public Integer getTargetID() {
-        return targetID;
-    }
-
-    public void setTargetID(Integer targetID) {
-        this.targetID = targetID;
-    }
-
-    public LocalDate getDateAdded() {
-        return dateAdded;
-    }
-
-    public void setDateAdded(LocalDate dateAdded) {
-        this.dateAdded = dateAdded;
-    }
 }
 
Index: src/main/java/com/example/skychasemk/repository/TopMonthlyReportRepository.java
===================================================================
--- src/main/java/com/example/skychasemk/repository/TopMonthlyReportRepository.java	(revision de83113e09d4c6a32e066d85e3adf027088a2433)
+++ src/main/java/com/example/skychasemk/repository/TopMonthlyReportRepository.java	(revision 62bba0c73980e31e95db489d91493dc186ed2439)
@@ -3,4 +3,5 @@
 import com.example.skychasemk.model.TopMonthlyReport;
 import org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.data.jpa.repository.Query;
 import org.springframework.stereotype.Repository;
 
@@ -10,4 +11,6 @@
 @Repository
 public interface TopMonthlyReportRepository extends JpaRepository<TopMonthlyReport, LocalDate> {
-    List<TopMonthlyReport> findByMonth(LocalDate month);
+    @Query("SELECT v FROM TopMonthlyReport v")
+    List<TopMonthlyReport> findAllRecords();
+
 }
Index: src/main/java/com/example/skychasemk/repository/WishlistRepository.java
===================================================================
--- src/main/java/com/example/skychasemk/repository/WishlistRepository.java	(revision de83113e09d4c6a32e066d85e3adf027088a2433)
+++ src/main/java/com/example/skychasemk/repository/WishlistRepository.java	(revision 62bba0c73980e31e95db489d91493dc186ed2439)
@@ -4,14 +4,28 @@
 import com.example.skychasemk.model.Flight;
 import com.example.skychasemk.model.Wishlist;
+import jakarta.transaction.Transactional;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.data.jpa.repository.Modifying;
 import org.springframework.data.jpa.repository.Query;
+import org.springframework.data.repository.query.Param;
 import org.springframework.jdbc.core.JdbcTemplate;
 import org.springframework.stereotype.Repository;
+
+import java.util.List;
 
 @Repository
 public interface WishlistRepository extends JpaRepository<Wishlist, Integer> {
 
-    @Query("SELECT w FROM Wishlist w WHERE w.targetID = :targetId AND w.userID = :userId")
+    @Query("SELECT w FROM Wishlist w WHERE w.targetId = :targetId AND w.userId = :userId")
     Wishlist findByTargetIdAndUserId(Integer targetId, Integer userId);
+
+    @Query("SELECT w FROM Wishlist w WHERE w.userId = :userId")
+    List<Wishlist> findWishlistByUserId(@Param("userId") Long userId);
+
+    @Modifying
+    @Transactional
+    @Query("DELETE FROM Wishlist w WHERE w.userId = :userId AND w.targetId = :targetId")
+    void deleteByUserIdAndTargetId(@Param("userId") Integer userId, @Param("targetId") Integer targetId);
+
 }
Index: src/main/java/com/example/skychasemk/services/SupportTicketService.java
===================================================================
--- src/main/java/com/example/skychasemk/services/SupportTicketService.java	(revision de83113e09d4c6a32e066d85e3adf027088a2433)
+++ src/main/java/com/example/skychasemk/services/SupportTicketService.java	(revision 62bba0c73980e31e95db489d91493dc186ed2439)
@@ -39,8 +39,8 @@
     public SupportTicket createTicket(@RequestBody SupportTicketDTO dto) {
         SupportTicket ticket = new SupportTicket();
+        ticket.setUserId(dto.getUserId());
         ticket.setDateCreated(LocalDate.now());
         ticket.setStatus(OPEN);
         ticket.setDescription(dto.getDescription());
-
         return supportTicketRepository.save(ticket);
     }
Index: src/main/java/com/example/skychasemk/services/TopMonthlyReportService.java
===================================================================
--- src/main/java/com/example/skychasemk/services/TopMonthlyReportService.java	(revision de83113e09d4c6a32e066d85e3adf027088a2433)
+++ src/main/java/com/example/skychasemk/services/TopMonthlyReportService.java	(revision 62bba0c73980e31e95db489d91493dc186ed2439)
@@ -15,9 +15,5 @@
 
     public List<TopMonthlyReport> getAllReports() {
-        return repository.findAll();
-    }
-
-    public List<TopMonthlyReport> getReportsByMonth(LocalDate month) {
-        return repository.findByMonth(month);
+        return repository.findAllRecords();
     }
 }
Index: src/main/java/com/example/skychasemk/services/WishlistService.java
===================================================================
--- src/main/java/com/example/skychasemk/services/WishlistService.java	(revision de83113e09d4c6a32e066d85e3adf027088a2433)
+++ src/main/java/com/example/skychasemk/services/WishlistService.java	(revision 62bba0c73980e31e95db489d91493dc186ed2439)
@@ -2,4 +2,5 @@
 
 import com.example.skychasemk.dto.WishlistDTO;
+import com.example.skychasemk.model.Booking;
 import com.example.skychasemk.model.Flight;
 import com.example.skychasemk.model.Wishlist;
@@ -7,5 +8,9 @@
 import com.example.skychasemk.repository.WishlistRepository;
 import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.http.HttpStatus;
+import org.springframework.http.ResponseEntity;
 import org.springframework.stereotype.Service;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.RequestBody;
 
 import java.time.LocalDate;
@@ -26,11 +31,13 @@
     }
 
+
     public Wishlist saveWishlist(Wishlist wishlist) {
+        if (wishlist == null) {
+            throw new IllegalArgumentException("Wishlist cannot be null");
+        }
+        wishlist.setDate_added(LocalDate.now());
         return wishlistRepository.save(wishlist);
     }
 
-    public void deleteWishlist(Integer wishlistID) {
-        wishlistRepository.deleteById(wishlistID);
-    }
 
     public void updateWishlist(WishlistDTO wishlistRequest) {
@@ -43,7 +50,7 @@
             if (existingItem == null) {
                 Wishlist newWishlistItem = new Wishlist();
-                newWishlistItem.setTargetID(Math.toIntExact(wishlistRequest.getTargetID()));
-                newWishlistItem.setUserID(wishlistRequest.getUserID());
-                newWishlistItem.setDateAdded(LocalDate.now());
+                newWishlistItem.setTargetId(Math.toIntExact(wishlistRequest.getTargetID()));
+                newWishlistItem.setUserId(wishlistRequest.getUserID());
+                newWishlistItem.setDate_added(LocalDate.now());
                 wishlistRepository.save(newWishlistItem);
             }
@@ -57,4 +64,11 @@
     }
 
+    public List<Wishlist> getAllItems(Long userId) {
+        return wishlistRepository.findWishlistByUserId(userId);
+    }
+
+    public void deleteRecordFromWishlist(Integer userId, Integer targetId) {
+        wishlistRepository.deleteByUserIdAndTargetId(userId, targetId);
+    }
 }
 
Index: src/main/resources/static/FlightSearch.html
===================================================================
--- src/main/resources/static/FlightSearch.html	(revision de83113e09d4c6a32e066d85e3adf027088a2433)
+++ src/main/resources/static/FlightSearch.html	(revision 62bba0c73980e31e95db489d91493dc186ed2439)
@@ -113,5 +113,5 @@
             padding: 10px;
             color:white;
-            font-family: Cambria;
+            font-family: Cambria,sans-serif;
         }
         .search {
@@ -170,4 +170,16 @@
             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;
         }
 
@@ -209,4 +221,5 @@
         <button @click="showReportPopup">Report Issue</button>
         <button @click="goToWishlistPage">🤍</button>
+        <button @click="goToReports">Monthly Report</button>
         <button @click="home">Log Out</button>
     </header>
@@ -296,5 +309,6 @@
             showPopup: false,
             issueDescription: '',
-            userId:''
+            userId:'',
+            wishlisted:false
         },
         computed: {
@@ -363,18 +377,34 @@
                 window.location.href = '/';
             },
+            goToReports(){
+                window.location.href = '/views'
+            },
             async toggleWishlist(flight) {
                 flight.wishlisted = !flight.wishlisted;
+                this.$set(this.flights, this.flights.indexOf(flight), flight);
                 const wishlistData = {
-                    targetId: flight.flightId,
-                    wishlisted: flight.wishlisted
+                    userId: parseInt(this.userId),
+                    targetId: flight.flightID
                 };
-                try {
-                    await axios.post('/api/wishlists', wishlistData);
-                } catch (error) {
-                    console.error("Error updating wishlist:", error);
+                console.log(wishlistData);
+                if (!flight.wishlisted) {
+                    try {
+                        await axios.delete('/api/wishlists', { params: wishlistData });
+                        console.log("Removed from wishlist");
+                    } catch (error) {
+                        console.error("Error removing from wishlist:", error);
+                    }
+                } else {
+                    try {
+                        await axios.post('/api/wishlists/add', wishlistData);
+                        console.log("Added to wishlist");
+                    } catch (error) {
+                        console.error("Error adding to wishlist:", error);
+                    }
                 }
             },
-            goToWishlistPage() {
-                window.location.href = '/api/wishlists';
+            async goToWishlistPage() {
+                window.location.href = `/api/wishlists?userId=${encodeURIComponent(this.userId)}`;
+
             },
             showReportPopup() {
@@ -387,5 +417,5 @@
                 if (this.issueDescription.trim()) {
                     const reviewData = {
-                        userID: this.userId,
+                        userId: this.userId,
                         subject: "Issue Report",
                         description: this.issueDescription
Index: c/main/resources/static/TopMonthlyReport.html
===================================================================
--- src/main/resources/static/TopMonthlyReport.html	(revision de83113e09d4c6a32e066d85e3adf027088a2433)
+++ 	(revision )
@@ -1,67 +1,0 @@
-<!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/ViewReport.html
===================================================================
--- src/main/resources/static/ViewReport.html	(revision 62bba0c73980e31e95db489d91493dc186ed2439)
+++ src/main/resources/static/ViewReport.html	(revision 62bba0c73980e31e95db489d91493dc186ed2439)
@@ -0,0 +1,191 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <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'>
+
+    <style>
+        body {
+            background: url('images/flight.jpg') no-repeat center center fixed;
+            background-size: cover;
+            font-family: Arial, sans-serif;
+            margin: 20px;
+            padding: 20px;
+            text-align: center;
+        }
+
+        h1 {
+            color: white;
+            font-size: 20px;
+            padding-top:50px;
+        }
+        .header {
+            position: absolute;
+            top: 0;
+            left: 0;
+            display: flex;
+            align-items: center;
+            background-color: rebeccapurple;
+            padding: 10px;
+            width: 100%;
+            z-index: 10;
+        }
+        .header img {
+            width: 40px;
+            height: 40px;
+            margin-right: 20px;
+        }
+
+        .header h1 {
+            color: white;
+            margin: 0;
+            font-size: 15px;
+            padding-right: 50px;
+        }
+
+        .header button {
+            background-color: transparent;
+            border: none;
+            color: white;
+            font-size: 14px;
+        }
+
+        .header button:hover {
+            background-color: transparent;
+            cursor: pointer;
+        }
+        table {
+            width: 80%;
+            margin: 20px auto;
+            border-collapse: collapse;
+            background-color: #fff;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+        }
+
+        th, td {
+            padding: 12px;
+            border: 1px solid #ddd;
+            text-align: left;
+        }
+
+        th {
+            background-color: rebeccapurple;
+            color: white;
+        }
+
+        tr:hover {
+            background-color: #f1f1f1;
+        }
+        .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;
+            z-index: 1001; /* Ensure it's above the overlay */
+        }
+
+        .popup button {
+            margin-top: 10px;
+            background-color: rebeccapurple;
+            color: white;
+            border: none;
+            padding: 5px;
+            cursor: pointer;
+        }
+
+        .popup button:hover {
+            background-color: mediumpurple;
+        }
+    </style>
+    <title>Database Views</title>
+</head>
+<body>
+<div id="app">
+    <header class="header">
+        <button @click="home"><img src="/images/home.png" alt="Home Icon"></button>
+        <button @click="goToWishlistPage">🤍</button>
+        <button @click="goToReports">Monthly Report</button>
+        <button @click="home">Log Out</button>
+    </header>
+    <h1>Top Monthly Report</h1>
+    <table>
+        <thead>
+        <tr>
+            <th>Month</th>
+            <th>Category</th>
+            <th>Name</th>
+            <th>Count</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr v-for="(report, index) in reports" :key="index">
+            <td>{{ report.month }}</td>
+            <td>{{ report.category }}</td>
+            <td>{{ report.name }}</td>
+            <td>{{ report.count }}</td>
+        </tr>
+        </tbody>
+    </table>
+</div>
+
+<script>
+    new Vue({
+        el: '#app',
+        data: {
+            reports: []
+        },
+        mounted() {
+            this.fetchReport();
+        },
+        methods: {
+            async fetchReport() {
+                try {
+                    const response = await fetch('http://localhost:8080/api/views');
+                    this.reports = await response.json();
+                    console.log("Fetched data:", this.reports);
+                } catch (error) {
+                    console.error("Error fetching reports:", error);
+                }
+            },
+            home() {
+                window.location.href = '/';
+            },
+            goToReports() {
+                window.location.href = '/views'
+            },
+            async goToWishlistPage() {
+                window.location.href = `/wishlists?userId=${encodeURIComponent(this.userId)}`;
+            }
+        }
+    });
+</script>
+</body>
+</html>
Index: src/main/resources/static/Wishlist.html
===================================================================
--- src/main/resources/static/Wishlist.html	(revision de83113e09d4c6a32e066d85e3adf027088a2433)
+++ src/main/resources/static/Wishlist.html	(revision 62bba0c73980e31e95db489d91493dc186ed2439)
@@ -4,5 +4,10 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>SkyChase-mk</title>
+    <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'>
+
+    <title>SkyChase - Wishlist</title>
     <style>
         body {
@@ -24,5 +29,5 @@
             display: flex;
             align-items: center;
-            background-color:rebeccapurple;
+            background-color: rebeccapurple;
             padding: 10px;
             width: 100%;
@@ -73,11 +78,26 @@
             background-color: #0056b3;
         }
+
         .adminlogin {
-            top:0;
+            top: 0;
             right: 0;
             background-color: rebeccapurple;
-            border:0;
-            color:white;
+            border: 0;
+            color: white;
             padding: 0 1200px;
+        }
+
+        .wishlist-content {
+            margin-top: 60px;
+            color: white;
+        }
+
+        ul {
+            list-style-type: none;
+        }
+
+        li {
+            margin: 10px 0;
+            font-size: 18px;
         }
     </style>
@@ -90,7 +110,46 @@
 </div>
 
-<div class="buttons">
-    <h1>Test</h1>
+<div class="wishlist-content">
+    <h1>Your Wishlist</h1>
+    <ul>
+        <li v-if="wishlist.length === 0">Your wishlist is empty!</li>
+        <li v-else v-for="item in wishlist" :key="item.wishlistID">{{ item.targetId }} || {{item.userId}}</li>
+    </ul>
 </div>
+
+<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
+
+<script>
+    new Vue({
+        el: '#app',
+        data: {
+            userId: ''
+        },
+        mounted() {
+            const params = new URLSearchParams(window.location.search);
+            this.userId = params.get("userId");
+            this.fetchWishlist();
+        },
+        async fetchWishlist() {
+            try {
+                const response = await fetch(`/api/wishlists/${this.userId}`);
+                const wishlist = await response.json();
+
+                const wishlistElement = document.getElementById('wishlist');
+                const emptyMessage = document.getElementById('empty-message');
+
+                if (wishlist.length === 0) {
+                    emptyMessage.style.display = 'block';
+                } else {
+                    emptyMessage.style.display = 'none';
+                    wishlistElement.innerHTML = wishlist.map(item => `<li>${item.name}</li>`).join('');
+                }
+            } catch (error) {
+                console.error('Error fetching wishlist:', error);
+            }
+        }
+    })
+    //window.onload = fetchWishlist;
+</script>
 </body>
 </html>
Index: c/main/resources/templates/WishlistPage.html
===================================================================
--- src/main/resources/templates/WishlistPage.html	(revision de83113e09d4c6a32e066d85e3adf027088a2433)
+++ 	(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.id}`;
-            },
-            logout() {
-                window.location.href = '/';
-            }
-        }
-    });
-</script>
-
-</body>
-</html>