diff --git a/client/src/Router.tsx b/client/src/Router.tsx
index 9def8d04551440718c0b5fe7eb5ca20c07277d71..39237de97752da64b94420777e75424d39edcc96 100644
--- a/client/src/Router.tsx
+++ b/client/src/Router.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 import UserLayout from "./components/UserLayout";
+import Book from "./pages/Book";
 import Home from "./pages/Home";
 
 function Router() {
@@ -11,7 +12,7 @@ function Router() {
           {/* Home page (user) */}
           <Route index element={<Home />} />
           {/* Book a boat (user) */}
-          <Route path="book" element={<p>Book</p>}>
+          <Route path="book" element={<Book />}>
             {/* After booking (user) */}
             <Route path="success" element={null} />
           </Route>
diff --git a/client/src/pages/Book.tsx b/client/src/pages/Book.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..eca31428a723e0cb88b7c763550547d5ba268dbe
--- /dev/null
+++ b/client/src/pages/Book.tsx
@@ -0,0 +1,122 @@
+import React from "react";
+import { Button, Col, Container, Form, Row } from "react-bootstrap";
+import { Controller, useForm } from "react-hook-form";
+import Divider from "../components/Divider";
+import Modal from "../components/Modal";
+
+type FormData = {
+  boatName: string;
+  startTime: string;
+  estimatedEndTime: string;
+  destination: string;
+  name: string;
+  email: string;
+  annotations: string;
+};
+
+function Book() {
+  const { control, handleSubmit } = useForm<FormData>();
+  const onSubmit = (data: FormData) => console.log(data);
+  return (
+    <Container className="pt-5">
+      <Row>
+        <Col xs={{ span: 10, offset: 1 }}>
+          <Modal>
+            <h1 className="text-center">Book a Boat!</h1>
+            <p className="text-center">
+              Please enter the information for your booking
+            </p>
+            <Divider />
+            <Form onSubmit={handleSubmit(onSubmit)}>
+              <Controller
+                name="boatName"
+                control={control}
+                render={({ field }) => (
+                  <div className="mb-2">
+                    <Form.Label>Boat name</Form.Label>
+                    <Form.Control type="text" {...field} />
+                  </div>
+                )}
+              />
+              <Controller
+                name="startTime"
+                control={control}
+                render={({ field }) => (
+                  <div className="mb-2">
+                    <Form.Label>Start time</Form.Label>
+                    <Form.Control type="text" {...field} />
+                  </div>
+                )}
+              />
+              <Controller
+                name="estimatedEndTime"
+                control={control}
+                render={({ field }) => (
+                  <div className="mb-2">
+                    <Form.Label>Estimated end time</Form.Label>
+                    <Form.Control type="text" {...field} />
+                  </div>
+                )}
+              />
+              <Controller
+                name="destination"
+                control={control}
+                render={({ field }) => (
+                  <div className="mb-2">
+                    <Form.Label>Destination</Form.Label>
+                    <Form.Control type="text" {...field} />
+                  </div>
+                )}
+              />
+              <Controller
+                name="name"
+                control={control}
+                render={({ field }) => (
+                  <div className="mb-2">
+                    <Form.Label>Destination</Form.Label>
+                    <Form.Control type="text" {...field} />
+                  </div>
+                )}
+              />
+              <Controller
+                name="email"
+                control={control}
+                render={({ field }) => (
+                  <div className="mb-2">
+                    <Form.Label>Your Mail</Form.Label>
+                    <Form.Control type="email" {...field} />
+                  </div>
+                )}
+              />
+              <Controller
+                name="name"
+                control={control}
+                render={({ field }) => (
+                  <div className="mb-2">
+                    <Form.Label>Your Name</Form.Label>
+                    <Form.Control type="text" {...field} />
+                  </div>
+                )}
+              />
+              <Controller
+                name="annotations"
+                control={control}
+                render={({ field }) => (
+                  <div className="mb-2">
+                    <Form.Label>Annotations (optional)</Form.Label>
+                    <Form.Control as="textarea" type="text" {...field} />
+                  </div>
+                )}
+              />
+              <Button type="submit" variant="secondary" className="mt-2 w-100">
+                Book this boat!
+              </Button>
+            </Form>
+          </Modal>
+        </Col>
+      </Row>
+    </Container>
+  );
+}
+
+export default Book;
diff --git a/client/src/pages/Home.tsx b/client/src/pages/Home.tsx
index 00d4867dffe759daa33624eccd37c9b85b6f8113..ce8ac00faf563dd9dbab46903f7564690e324992 100644
--- a/client/src/pages/Home.tsx
+++ b/client/src/pages/Home.tsx
@@ -9,9 +9,9 @@ function Home() {
       <Row className="h-100">
         <Col
           xs={{ span: 8, offset: 2 }}
-          className="h-100 py-5 text-center d-flex flex-column justify-content-between"
+          className="h-100 py-5 text-center d-flex flex-column justify-content-between rounded-xl"
         >
-          <Image src={logo} className="mb-5" />
+          <Image src={logo} fluid className="mb-5" />
           <div>
             <Link to="/book">
               <Button