diff --git a/components/booking/DatePicker.tsx b/components/booking/DatePicker.tsx
index b501128b..53ce7630 100644
--- a/components/booking/DatePicker.tsx
+++ b/components/booking/DatePicker.tsx
@@ -153,10 +153,11 @@ function DatePicker({
                 selectedMonth <= dayjs().month() &&
                 "text-gray-400 dark:text-gray-600"
             )}
-            disabled={typeof selectedMonth === "number" && selectedMonth <= dayjs().month()}>
+            disabled={typeof selectedMonth === "number" && selectedMonth <= dayjs().month()}
+            data-testid="decrementMonth">
             <ChevronLeftIcon className="group-hover:text-black dark:group-hover:text-white w-5 h-5" />
           </button>
-          <button className="group p-1" onClick={incrementMonth}>
+          <button className="group p-1" onClick={incrementMonth} data-testid="incrementMonth">
             <ChevronRightIcon className="group-hover:text-black dark:group-hover:text-white w-5 h-5" />
           </button>
         </div>
diff --git a/pages/[user].tsx b/pages/[user].tsx
index b1949c09..0f955cd6 100644
--- a/pages/[user].tsx
+++ b/pages/[user].tsx
@@ -50,7 +50,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps>) {
                   className="group relative dark:bg-neutral-900 dark:border-0 dark:hover:border-neutral-600 bg-white hover:bg-gray-50 border border-neutral-200 hover:border-brand rounded-sm">
                   <ArrowRightIcon className="absolute transition-opacity h-4 w-4 right-3 top-3 text-black dark:text-white opacity-0 group-hover:opacity-100" />
                   <Link href={`/${user.username}/${type.slug}`}>
-                    <a className="block px-6 py-4">
+                    <a className="block px-6 py-4" data-testid="event-type-link">
                       <h2 className="font-semibold text-neutral-900 dark:text-white">{type.title}</h2>
                       <EventTypeDescription eventType={type} />
                     </a>
diff --git a/playwright/booking-pages.test.ts b/playwright/booking-pages.test.ts
index f61c52b8..44d01dc1 100644
--- a/playwright/booking-pages.test.ts
+++ b/playwright/booking-pages.test.ts
@@ -3,7 +3,9 @@ import { kont } from "kont";
 import { pageProvider } from "./lib/pageProvider";
 
 jest.setTimeout(60e3);
-jest.retryTimes(3);
+if (process.env.CI) {
+  jest.retryTimes(3);
+}
 
 describe("free user", () => {
   const ctx = kont()
@@ -31,5 +33,26 @@ describe("pro user", () => {
     expect($eventTypes.length).toBeGreaterThanOrEqual(2);
   });
 
-  // TODO: make sure `/free/30min` is bookable and that `/free/60min` is not
+  test("book an event first day in next month", async () => {
+    const { page } = ctx;
+    // Click first event type
+    await page.click('[data-testid="event-type-link"]');
+    // Click [data-testid="incrementMonth"]
+    await page.click('[data-testid="incrementMonth"]');
+    // Click [data-testid="day"]
+    await page.click('[data-testid="day"]');
+    // Click [data-testid="time"]
+    await page.click('[data-testid="time"]');
+    // --- fill form
+    await page.fill('[name="name"]', "Test Testson");
+    await page.fill('[name="email"]', "test@example.com");
+    await page.press('[name="email"]', "Enter");
+
+    // Make sure we're navigated to the success page
+    await page.waitForNavigation({
+      url(url) {
+        return url.pathname.endsWith("/success");
+      },
+    });
+  });
 });