Index: src/main/java/com/example/skychasemk/controller/WishlistController.java
===================================================================
--- src/main/java/com/example/skychasemk/controller/WishlistController.java	(revision 62bba0c73980e31e95db489d91493dc186ed2439)
+++ src/main/java/com/example/skychasemk/controller/WishlistController.java	(revision fda671c83bcf077a6425bb2a62c2d3325df6579e)
@@ -3,4 +3,5 @@
 import com.example.skychasemk.dto.WishlistDTO;
 import com.example.skychasemk.model.Wishlist;
+import com.example.skychasemk.repository.WishlistRepository;
 import com.example.skychasemk.services.WishlistService;
 import org.springframework.beans.factory.annotation.Autowired;
@@ -18,8 +19,12 @@
     private WishlistService wishlistService;
 
+    @Autowired
+    private WishlistRepository wishlistRepository;
+
     @GetMapping
     public List<Wishlist> getAllWishlists() {
-        return wishlistService.getAllWishlists();
+        return wishlistRepository.findAll();
     }
+
     @PostMapping("/add")
     public Wishlist createWishlist(@RequestBody Wishlist wishlist) {
@@ -33,5 +38,5 @@
 
     @GetMapping("/{userId}")
-    public ResponseEntity<List<Wishlist>> getWishlist(@RequestParam("userId") Long userId) {
+    public ResponseEntity<List<Wishlist>> getWishlist(@PathVariable Long userId) {
         List<Wishlist> wishlist = wishlistService.getAllItems(userId);
         return ResponseEntity.ok(wishlist);
Index: src/main/java/com/example/skychasemk/model/WebConfig.java
===================================================================
--- src/main/java/com/example/skychasemk/model/WebConfig.java	(revision 62bba0c73980e31e95db489d91493dc186ed2439)
+++ src/main/java/com/example/skychasemk/model/WebConfig.java	(revision fda671c83bcf077a6425bb2a62c2d3325df6579e)
@@ -34,5 +34,5 @@
         registry.addViewController("/transaction").setViewName("forward:/TransactionPage.html");
         registry.addViewController("/login").setViewName("forward:/UserLogin.html");
-        registry.addViewController("/wishlist").setViewName("forward:/Wishlist.html");
+        registry.addViewController("/wishlists").setViewName("forward:/Wishlist.html");
         registry.addViewController("/signup").setViewName("forward:/UserSignup.html");
         registry.addViewController("/views").setViewName("forward:/ViewReport.html");
Index: src/main/resources/static/FlightSearch.html
===================================================================
--- src/main/resources/static/FlightSearch.html	(revision 62bba0c73980e31e95db489d91493dc186ed2439)
+++ src/main/resources/static/FlightSearch.html	(revision fda671c83bcf077a6425bb2a62c2d3325df6579e)
@@ -405,6 +405,5 @@
             },
             async goToWishlistPage() {
-                window.location.href = `/api/wishlists?userId=${encodeURIComponent(this.userId)}`;
-
+                window.location.href = `/wishlists?userId=${encodeURIComponent(this.userId)}`;
             },
             showReportPopup() {
Index: src/main/resources/static/Wishlist.html
===================================================================
--- src/main/resources/static/Wishlist.html	(revision 62bba0c73980e31e95db489d91493dc186ed2439)
+++ src/main/resources/static/Wishlist.html	(revision fda671c83bcf077a6425bb2a62c2d3325df6579e)
@@ -4,13 +4,13 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SkyChase - Wishlist</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>
+    <link rel="stylesheet" href="/css/main.css">
     <style>
         body {
-            background: url('images/homepage.jpg') no-repeat center center fixed;
+            background: url('images/sky.jpg') no-repeat center center fixed;
             background-size: cover;
             display: flex;
@@ -46,59 +46,74 @@
             padding-right: 50px;
         }
-
-        .buttons {
-            text-align: center;
+        .header button{
+            background-color:rebeccapurple;
         }
-
-        .buttons button {
-            padding: 15px 30px;
-            margin: 10px;
-            font-size: 18px;
-            border: none;
-            border-radius: 5px;
+        select {
+            -webkit-appearance: none;
+            -moz-appearance: none;
+            appearance: none;
+            border: 0;
+            outline: 0;
+            font: inherit;
+            width: 20em;
+            height: 3em;
+            padding: 0 4em 0 1em;
+            background: url(https://upload.wikimedia.org/wikipedia/commons/9/9d/Caret_down_font_awesome_whitevariation.svg) no-repeat right 0.8em center/1.4em, linear-gradient(to left, rgba(255, 255, 255, 0.3) 3em, rgba(255, 255, 255, 0.2) 3em);
+            color: white;
+            border-radius: 0.25em;
+            box-shadow: 0 0 1em 0 rgba(0, 0, 0, 0.2);
             cursor: pointer;
-            transition: 0.3s;
         }
-
-        .signup {
-            background-color: rebeccapurple;
-            color: white;
+        select option {
+            color: inherit;
+            background-color: #320a28;
         }
-
-        .signup:hover {
-            background-color: mediumpurple;
+        select:focus {
+            outline: none;
         }
-
-        .login {
-            background-color: #007bff;
-            color: white;
+        select::-ms-expand {
+            display: none;
         }
-
-        .login:hover {
-            background-color: #0056b3;
-        }
-
-        .adminlogin {
-            top: 0;
-            right: 0;
-            background-color: rebeccapurple;
-            border: 0;
-            color: white;
-            padding: 0 1200px;
-        }
-
         .wishlist-content {
             margin-top: 60px;
             color: white;
         }
+        #app {
+            text-align: center;
 
+        }
         ul {
             list-style-type: none;
+            border: 2px solid rebeccapurple;
+            width: 80%; /* Adjust the width as needed */
+            background-color: rebeccapurple;
+            position: relative;
+            display: flex;
+            flex-direction: column; /* Stack items vertically */
+            align-items: center; /* Center horizontally */
+            justify-content: center; /* Center vertically */
+            padding: 20px;
+            border-radius: 15px;
+            margin: 0 auto; /* Center the ul itself */
+            text-align: center; /* Center text inside the ul */
         }
 
         li {
-            margin: 10px 0;
-            font-size: 18px;
+            font-size: 14px;
+            display: block; /* Make each item block-level */
+            padding: 10px;
+            width: 100%; /* Make li take full width inside ul */
         }
+
+
+        .book {
+            background-color: white;
+            color: rebeccapurple;
+            width: 5em;
+            height: 3em;
+            align-content: center;
+            font-size: 14px;
+        }
+
     </style>
 </head>
@@ -107,16 +122,21 @@
     <img src="/images/home.png" alt="Home Icon">
     <h1>SkyChase</h1>
-    <button class="adminlogin" onclick="location.href='/admin'">Admin?</button>
+    <button @click="home">Log Out</button>
 </div>
 
-<div class="wishlist-content">
+<div id="app" 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>
+        <li v-else v-for="item in wishlist" :key="item.wishlistID">
+            Wishlist ID: {{ item.wishlistID }} | Added on: {{ item.date_added }}
+            <br>
+            <br>
+            <button @click="bookFlights"  class="book">
+                Book
+            </button>
+        </li>
     </ul>
 </div>
-
-<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
 
 <script>
@@ -124,5 +144,6 @@
         el: '#app',
         data: {
-            userId: ''
+            userId: '',
+            wishlist: [] // Array to hold the wishlist items
         },
         mounted() {
@@ -131,24 +152,43 @@
             this.fetchWishlist();
         },
-        async fetchWishlist() {
-            try {
-                const response = await fetch(`/api/wishlists/${this.userId}`);
-                const wishlist = await response.json();
+        methods: {
+            async fetchWishlist() {
+                try {
+                    const response = await fetch(`/api/wishlists/${this.userId}`);
+                    this.wishlist = await response.json(); // Directly assign the result to the wishlist data
+                } catch (error) {
+                    console.error('Error fetching wishlist:', error);
+                }
+            },
+            bookFlights() {
+                if (!this.selectedFlights.length) {
+                    alert("Please select at least one flight.");
+                    return;
+                }
 
-                const wishlistElement = document.getElementById('wishlist');
-                const emptyMessage = document.getElementById('empty-message');
+                const flight = this.selectedFlights[0];
+                console.log(flight);
+                const totalCost = flight.price;
 
-                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);
+                const bookingData = {
+                    flightId: flight.flightID,
+                    bookingDate: new Date().toISOString().split('T')[0],
+                    status: 'PENDING',
+                    totalCost: totalCost,
+                    userId:this.userId
+                };
+                axios.post('/api/bookings', bookingData)
+                    .then(response => {
+                        const bookingID = response.data.bookingId;
+                        alert("Booked successfully!");
+                        window.location.href = `/transaction?amount=${encodeURIComponent(totalCost)}&bookingId=${encodeURIComponent(bookingID)}&flightId=${encodeURIComponent(flight.flightID)}&userId=${encodeURIComponent(this.userId)}`;
+                    })
+                    .catch(error => {
+                        console.error("Error booking flight", error);
+                        alert("There was an error creating your booking. Please try again.");
+                    });
             }
         }
-    })
-    //window.onload = fetchWishlist;
+    });
 </script>
 </body>