diff --git a/src/pages/bookings/bookings.js b/src/pages/bookings/bookings.js
index d2bc964a1999cfe1bdc67b2b60f5a08d878901e9..6fa0a82ff56f24caeaf67fa241141416e97c178d 100644
--- a/src/pages/bookings/bookings.js
+++ b/src/pages/bookings/bookings.js
@@ -5,6 +5,7 @@ import {
   Heading,
   Text,
   Stack,
+  Select,
   Button,
   AlertDialog,
   AlertDialogOverlay,
@@ -24,6 +25,9 @@ const BookingsPage = () => {
   const [isOpen, setIsOpen] = useState(false);
   const [extendTime, setExtendTime] = useState(null);
 
+  const bookingServiceBaseUrl = process.env.REACT_APP_BOOKING_SERVICE_ENDPOINT;
+
+
   useEffect(() => {
     fetchBookings();
   }, []);
@@ -31,19 +35,19 @@ const BookingsPage = () => {
   const fetchBookings = async () => {
     setIsLoading(true);
     try {
-      // const response = await fetch("/bookings", {
-      //   headers: {
-      //     Authorization: `Bearer ${localStorage.getItem("token")}`,
-      //   },
-      // });
-      // const data = await response.json();
-      const data = [
-        { id: 1, location: "Test Location 1", address: "123 Test Address", startTime: "12:00PM - 25/7/2023", endTime: "14:00PM - 25/7/2023", },
-        { id: 2, location: "Test Location 2", address: "1224 Test Street", startTime: "12:00PM - 25/7/2023", endTime: "14:00PM - 25/7/2023", },
-        { id: 3, location: "Test Location 3", address: "123 Test Address", startTime: "12:00PM - 25/7/2023", endTime: "14:00PM - 25/7/2023", },
-        { id: 4, location: "Test Location 4", address: "123 Test Address", startTime: "12:00PM - 25/7/2023", endTime: "14:00PM - 25/7/2023", },
-        { id: 5, location: "Test Location 5", address: "123 Test Address", startTime: "12:00PM - 25/7/2023", endTime: "14:00PM - 25/7/2023", },
-      ];
+      const response = await fetch(`${bookingServiceBaseUrl}/bookings/getAllBookings`, {
+        headers: {
+          Authorization: `Bearer ${localStorage.getItem("token")}`,
+        },
+      });
+      const data = await response.json();
+      // const data = [
+      //   { id: 1, location: "Test Location 1", address: "123 Test Address", startTime: "12:00PM - 25/7/2023", endTime: "14:00PM - 25/7/2023", },
+      //   { id: 2, location: "Test Location 2", address: "1224 Test Street", startTime: "12:00PM - 25/7/2023", endTime: "14:00PM - 25/7/2023", },
+      //   { id: 3, location: "Test Location 3", address: "123 Test Address", startTime: "12:00PM - 25/7/2023", endTime: "14:00PM - 25/7/2023", },
+      //   { id: 4, location: "Test Location 4", address: "123 Test Address", startTime: "12:00PM - 25/7/2023", endTime: "14:00PM - 25/7/2023", },
+      //   { id: 5, location: "Test Location 5", address: "123 Test Address", startTime: "12:00PM - 25/7/2023", endTime: "14:00PM - 25/7/2023", },
+      // ];
       setBookings(data);
       setIsLoading(false);
     } catch (error) {
@@ -60,30 +64,30 @@ const BookingsPage = () => {
   const handleSubmitExtend = async () => {
     setIsOpen(false);
     setExtendTime(null);
-    // try {
-    //   const response = await fetch(`/bookings/${selectedBooking.id}/extend`, {
-    //     method: "PUT",
-    //     headers: {
-    //       Authorization: `Bearer ${localStorage.getItem("token")}`,
-    //       "Content-Type": "application/json",
-    //     },
-    //     body: JSON.stringify({ extendTime }),
-    //   });
-    //   if (response.ok) {
-    //     const data = await response.json();
-    //     setBookings(
-    //       bookings.map((booking) =>
-    //         booking.id === selectedBooking.id ? data.booking : booking
-    //       )
-    //     );
-    //     setExtendTime(null);
-    //     setError(null);
-    //   } else {
-    //     setError("Booking extension failed");
-    //   }
-    // } catch (error) {
-    //   setError(error.message);
-    // }
+    try {
+      const response = await fetch(`${bookingServiceBaseUrl}/bookings/extend/${selectedBooking.id}`, {
+        method: "PUT",
+        headers: {
+          Authorization: `Bearer ${localStorage.getItem("token")}`,
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({extend_hours: extendTime }),
+      });
+      if (response.ok) {
+        const data = await response.json();
+        setBookings(
+          bookings.map((booking) =>
+            booking.id === selectedBooking.id ? data.booking : booking
+          )
+        );
+        setExtendTime(null);
+        setError(null);
+      } else {
+        setError("Booking extension failed");
+      }
+    } catch (error) {
+      setError(error.message);
+    }
   };
 
   return (
@@ -102,7 +106,7 @@ const BookingsPage = () => {
           {!isLoading && !error && bookings.length > 0 && (
             <Stack spacing={4} minW={"50vw"}>
               {bookings.map((booking) => (
-                <Box key={booking.id} p={4} borderWidth={1} borderRadius={4}>
+                <Box key={booking.id} p={4} borderWidth={1} borderRadius={4} >
                   <Text>
                     <strong>Location:</strong> {booking.location}
                   </Text>
@@ -128,19 +132,26 @@ const BookingsPage = () => {
               <AlertDialogHeader>Extend Booking</AlertDialogHeader>
               <AlertDialogBody>
                 <Text>
-                  Select a time that is greater than {selectedBooking?.endTime}:
+                  Select how many hours you wish to extend your booking by:
                 </Text>
-                <input
-                  type="datetime-local"
-                  value={extendTime ?? ""}
-                  onChange={(e) => setExtendTime(e.target.value)}
-                />
+                  <Select value={extendTime} onChange={(e) => setExtendTime(e.target.value)}>
+                    <option value="" disabled>
+                      Choose an expiry time
+                    </option>
+                    <option value="1">1 hour</option>
+                    <option value="2">2 hours</option>
+                    <option value="3">3 hours</option>
+                    <option value="4">4 hours</option>
+                    <option value="5">5 hours</option>
+                    <option value="6">6 hours</option>
+                    <option value="7">7 hours</option>
+                    <option value="8">8 hours</option>
+                    <option value="9">9 hours</option>
+                    <option value="10">10 hours</option>
+                    <option value="11">11 hours</option>
+                    <option value="12">12 hours</option>
+                  </Select>
                 {error && <Text color="red">{error}</Text>}
-                {extendTime && (
-                  <Text>
-                    You have selected {extendTime}. Please confirm to proceed.
-                  </Text>
-                )}
               </AlertDialogBody>
               <AlertDialogFooter>
                 <Button