diff --git a/src/deskstar-frontend/components/DesksTable.tsx b/src/deskstar-frontend/components/DesksTable.tsx
index e80d2061..43ec5a39 100644
--- a/src/deskstar-frontend/components/DesksTable.tsx
+++ b/src/deskstar-frontend/components/DesksTable.tsx
@@ -1,7 +1,13 @@
 import { IDesk } from "../types/desk";
 import React from "react";
 
-const DesksTable = ({ desks }: { desks: IDesk[] }) => {
+const DesksTable = ({
+  desks,
+  onBook,
+}: {
+  desks: IDesk[];
+  onBook: Function;
+}) => {
   return (
     <div className="overflow-x-auto">
       <table className="table table-zebra w-full">
@@ -14,7 +20,7 @@ const DesksTable = ({ desks }: { desks: IDesk[] }) => {
         </thead>
         <tbody>
           {desks.map((desk: IDesk) => (
-            <DeskTableEntry key={desk.deskId} desk={desk} />
+            <DeskTableEntry key={desk.deskId} desk={desk} onBook={onBook}/>
           ))}
         </tbody>
       </table>
@@ -22,16 +28,28 @@ const DesksTable = ({ desks }: { desks: IDesk[] }) => {
   );
 };
 
-const DeskTableEntry = ({ desk }: { desk: IDesk }) => {
+const DeskTableEntry = ({
+  desk,
+  onBook,
+}: {
+  desk: IDesk;
+  onBook: Function;
+}) => {
   return (
     <tr className="hover">
       <td className="text-left font-bold">{desk.deskName}</td>
       <td className="text-left">{desk.deskTyp}</td>
       <td className="text-right">
-        <a href="#book-modal" className="btn btn-success">
+        <button
+          className="btn btn-success"
+          onClick={(event) => onBook(event, desk)}
+        >
           Book
-        </a>
-        <div id="book-modal" className="modal">
+        </button>
+        {/* <a href="#book-modal" className="btn btn-success">
+          Book
+        </a> */}
+        {/* <div id="book-modal" className="modal">
           <div className="modal-box text-left">
             <a href="#close" className="btn btn-sm btn-circle float-right">
               x
@@ -96,7 +114,7 @@ const DeskTableEntry = ({ desk }: { desk: IDesk }) => {
               Book
             </a>
           </div>
-        </div>
+        </div> */}
       </td>
     </tr>
   );
diff --git a/src/deskstar-frontend/lib/api/BookingService.ts b/src/deskstar-frontend/lib/api/BookingService.ts
index fe5f86d7..35d31ab5 100644
--- a/src/deskstar-frontend/lib/api/BookingService.ts
+++ b/src/deskstar-frontend/lib/api/BookingService.ts
@@ -63,3 +63,42 @@ export async function getBookings(
 
   return bookings;
 }
+
+export async function createBooking(
+  session: Session,
+  deskId: string,
+  startTime: EpochTimeStamp,
+  endTime: EpochTimeStamp
+) {
+  const response = await fetch(BACKEND_URL + "/bookings", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${session.accessToken}`,
+    },
+    body: JSON.stringify({
+      deskId,
+      startTime,
+      endTime,
+    }),
+  });
+  console.log(await response.status);
+  if (response.status !== 200) {
+    let text = await response.text();
+    // take away the quotes
+    text = text.substring(1, text.length - 1);
+    console.log(text);
+    switch (text) {
+      case "User not found":
+        return "User not found";
+      case "Desk not found":
+        return "The desk you are trying to book does not exist";
+      case "Time slot not available":
+        return "The time slot you are trying to book is not available";
+      default:
+        return "An unknown error occurred";
+    }
+  } else {
+    return "success";
+  }
+}
diff --git a/src/deskstar-frontend/lib/api/ResourceService.ts b/src/deskstar-frontend/lib/api/ResourceService.ts
index b30f58a2..a49f6502 100644
--- a/src/deskstar-frontend/lib/api/ResourceService.ts
+++ b/src/deskstar-frontend/lib/api/ResourceService.ts
@@ -17,7 +17,8 @@ export async function getBuildings(session: Session): Promise<IBuilding[]> {
   });
 
   if (response.status !== 200) {
-    console.log("Error fetching buildings");
+    console.log(response.status);
+    console.log( "Error fetching buildings");
     return [];
   }
 
@@ -40,6 +41,7 @@ export async function getFloors(
   );
 
   if (response.status !== 200) {
+    console.log(response.status);
     console.log("Error fetching floors");
     return [];
   }
@@ -63,6 +65,7 @@ export async function getRooms(
   );
 
   if (response.status !== 200) {
+    console.log(response.status);
     console.log("Error fetching rooms");
     return [];
   }
@@ -86,6 +89,7 @@ export async function getDesks(
   );
 
   if (response.status !== 200) {
+    console.log(response.status);
     console.log("Error fetching desks");
     return [];
   }
diff --git a/src/deskstar-frontend/pages/bookings/add.tsx b/src/deskstar-frontend/pages/bookings/add.tsx
index a5e07625..b705cbdd 100644
--- a/src/deskstar-frontend/pages/bookings/add.tsx
+++ b/src/deskstar-frontend/pages/bookings/add.tsx
@@ -11,6 +11,7 @@ import {
   getFloors,
   getRooms,
 } from "../../lib/api/ResourceService";
+import { createBooking } from "../../lib/api/BookingService";
 import { IBuilding } from "../../types/building";
 import { ILocation } from "../../types/location";
 import { IFloor } from "../../types/floor";
@@ -38,8 +39,38 @@ const Bookings = ({ buildings: origBuildings }: { buildings: IBuilding[] }) => {
   const [selectedDeskTypes, setSelectedDeskTypes] = useState<IDeskType[]>([]);
   const [desks, setDesks] = useState<IDesk[]>([]);
 
-  let startDateTime: string;
-  let endDateTime: string;
+  const [startDateTime, setStartDateTime] = useState<string>(
+    new Date().toISOString().substring(0, "YYYY-MM-DDTHH:SS".length)
+  );
+  const [endDateTime, setEndDateTime] = useState<string>(getEndDate());
+
+  async function onBook(event, desk) {
+    event.target.setAttribute("class", "btn loading");
+    let message;
+
+    await createBooking(session, desk.deskId, startDateTime, endDateTime)
+      .then((response) => {
+        if (response == "success") {
+          message =
+            "You successfully booked the desk " +
+            desk.deskName +
+            " from " +
+            startDateTime +
+            " to " +
+            endDateTime;
+          event.target.setAttribute("class", "btn btn-disabled");
+        } else {
+          console.log(response);
+          message = response;
+          event.target.setAttribute("class", "btn btn-success");
+        }
+      })
+      .catch((error) => {
+        console.error("Error calling createBooking:", error);
+        event.target.setAttribute("class", "btn btn-success");
+      });
+    alert(message);
+  }
 
   async function onSelectedLocationChange(selectedLocations: ILocation[]) {
     console.log(selectedLocations);
@@ -139,7 +170,7 @@ const Bookings = ({ buildings: origBuildings }: { buildings: IBuilding[] }) => {
             .toISOString()
             .substring(0, "YYYY-MM-DDTHH:SS".length)}
           min={new Date().toISOString().substring(0, "YYYY-MM-DDTHH:SS".length)}
-          onChange={(event) => (startDateTime = event.target.value)}
+          onChange={(event) => setStartDateTime(event.target.value)}
         />
       </div>
 
@@ -153,7 +184,7 @@ const Bookings = ({ buildings: origBuildings }: { buildings: IBuilding[] }) => {
           id="end-date-time"
           min={new Date().toISOString().substring(0, "YYYY-MM-DDTHH:SS".length)}
           defaultValue={getEndDate()}
-          onChange={(event) => (endDateTime = event.target.value)}
+          onChange={(event) => setEndDateTime(event.target.value)}
         />
       </div>
 
@@ -207,7 +238,7 @@ const Bookings = ({ buildings: origBuildings }: { buildings: IBuilding[] }) => {
       {rooms.length == 0 && <p>Please select a floor</p>}
       {deskTypes.length == 0 && <p>Please select a room</p>}
 
-      {desks.length > 0 && <DesksTable desks={desks} />}
+      {desks.length > 0 && <DesksTable desks={desks} onBook={onBook} />}
     </div>
   );
 };