diff --git a/apps/v4/registry/new-york-v4/blocks/calendar-20.tsx b/apps/v4/registry/new-york-v4/blocks/calendar-20.tsx
index aa2e7e66b66..cbd9646cd34 100644
--- a/apps/v4/registry/new-york-v4/blocks/calendar-20.tsx
+++ b/apps/v4/registry/new-york-v4/blocks/calendar-20.tsx
@@ -25,41 +25,43 @@ export default function Calendar20() {
 
   return (
     <Card className="gap-0 p-0">
-      <CardContent className="relative p-0 md:pr-48">
-        <div className="p-6">
-          <Calendar
-            mode="single"
-            selected={date}
-            onSelect={setDate}
-            defaultMonth={date}
-            disabled={bookedDates}
-            showOutsideDays={false}
-            modifiers={{
-              booked: bookedDates,
-            }}
-            modifiersClassNames={{
-              booked: "[&>button]:line-through opacity-100",
-            }}
-            className="bg-transparent p-0 [--cell-size:--spacing(10)] md:[--cell-size:--spacing(12)]"
-            formatters={{
-              formatWeekdayName: (date) => {
-                return date.toLocaleString("en-US", { weekday: "short" })
-              },
-            }}
-          />
-        </div>
-        <div className="no-scrollbar inset-y-0 right-0 flex max-h-72 w-full scroll-pb-6 flex-col gap-4 overflow-y-auto border-t p-6 md:absolute md:max-h-none md:w-48 md:border-t-0 md:border-l">
-          <div className="grid gap-2">
-            {timeSlots.map((time) => (
-              <Button
-                key={time}
-                variant={selectedTime === time ? "default" : "outline"}
-                onClick={() => setSelectedTime(time)}
-                className="w-full shadow-none"
-              >
-                {time}
-              </Button>
-            ))}
+      <CardContent className="p-0">
+        <div className="md:flex">
+          <div className="p-6">
+            <Calendar
+              mode="single"
+              selected={date}
+              onSelect={setDate}
+              defaultMonth={date}
+              disabled={bookedDates}
+              showOutsideDays={false}
+              modifiers={{
+                booked: bookedDates,
+              }}
+              modifiersClassNames={{
+                booked: "[&>button]:line-through opacity-100",
+              }}
+              className="bg-transparent p-0 [--cell-size:--spacing(10)] md:[--cell-size:--spacing(12)]"
+              formatters={{
+                formatWeekdayName: (date) => {
+                  return date.toLocaleString("en-US", { weekday: "short" })
+                },
+              }}
+            />
+          </div>
+          <div className="no-scrollbar flex h-72 w-full flex-col gap-4 overflow-y-auto border-t p-6 md:h-auto md:w-48 md:border-l">
+            <div className="grid gap-2">
+              {timeSlots.map((time) => (
+                <Button
+                  key={time}
+                  variant={selectedTime === time ? "default" : "outline"}
+                  onClick={() => setSelectedTime(time)}
+                  className="w-full shadow-none"
+                >
+                  {time}
+                </Button>
+              ))}
+            </div>
           </div>
         </div>
       </CardContent>