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: src/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>
