Index: src/main/resources/static/Wishlist.html
===================================================================
--- src/main/resources/static/Wishlist.html	(revision fda671c83bcf077a6425bb2a62c2d3325df6579e)
+++ src/main/resources/static/Wishlist.html	(revision 07fe0be0b1334016c97035b39d3c10d47238226d)
@@ -120,5 +120,5 @@
 <body>
 <div class="header">
-    <img src="/images/home.png" alt="Home Icon">
+    <img src="/images/home.png" alt="Home Icon" @click="home">
     <h1>SkyChase</h1>
     <button @click="home">Log Out</button>
@@ -133,5 +133,5 @@
             <br>
             <br>
-            <button @click="bookFlights"  class="book">
+            <button @click="bookFlights(item.wishlistID)"  class="book">
                 Book
             </button>
@@ -145,5 +145,6 @@
         data: {
             userId: '',
-            wishlist: [] // Array to hold the wishlist items
+            wishlist: [],
+            wishlistId:''
         },
         mounted() {
@@ -156,36 +157,50 @@
                 try {
                     const response = await fetch(`/api/wishlists/${this.userId}`);
-                    this.wishlist = await response.json(); // Directly assign the result to the wishlist data
+                    this.wishlist = await response.json();
                 } catch (error) {
                     console.error('Error fetching wishlist:', error);
                 }
             },
-            bookFlights() {
-                if (!this.selectedFlights.length) {
-                    alert("Please select at least one flight.");
-                    return;
-                }
-
-                const flight = this.selectedFlights[0];
-                console.log(flight);
-                const totalCost = flight.price;
-
-                const bookingData = {
-                    flightId: flight.flightID,
-                    bookingDate: new Date().toISOString().split('T')[0],
-                    status: 'PENDING',
-                    totalCost: totalCost,
-                    userId:this.userId
-                };
-                axios.post('/api/bookings', bookingData)
+            bookFlights(wishlistID) {
+                console.log(wishlistID);
+
+                axios.get(`/api/wishlists/flight/${encodeURIComponent(wishlistID)}`)
                     .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)}`;
+                        const flightId = response.data;
+                        console.log(flightId);
+                        axios.get(`/api/flights/${encodeURIComponent(flightId)}`)
+                            .then(response => {
+                                const flightData = response.data;
+                                console.log(flightId);
+                                const bookingData = {
+                                    flightId: flightData.flightID,
+                                    bookingDate: new Date().toISOString().split('T')[0],
+                                    status: 'PENDING',
+                                    totalCost: flightData.price,
+                                    userId:this.userId
+                                };
+                                axios.post('/api/bookings', bookingData)
+                                    .then(response => {
+                                        const bookingID = response.data.bookingId;
+                                        alert("Booked successfully!");
+                                        window.location.href = `/transaction?amount=${encodeURIComponent(flightData.price)}&bookingId=${encodeURIComponent(bookingID)}&flightId=${encodeURIComponent(flightData.flightID)}&userId=${encodeURIComponent(this.userId)}`;
+                                    })
+                                    .catch(error => {
+                                        console.error("Error booking flight", error);
+                                        alert("There was an error creating your booking. Please try again.");
+                                    });
+                            })
+                            .catch(error =>{
+                                console.error(error)
+                                }
+                            )
                     })
                     .catch(error => {
-                        console.error("Error booking flight", error);
-                        alert("There was an error creating your booking. Please try again.");
+                        console.error("Error fetching flight", error);
                     });
+
+            },
+            home() {
+                window.location.href = '/';
             }
         }
