diff --git a/webapp/src/components/ui/calendar.tsx b/webapp/src/components/ui/calendar.tsx
index 99ac94c4e..fc9b71b06 100644
--- a/webapp/src/components/ui/calendar.tsx
+++ b/webapp/src/components/ui/calendar.tsx
@@ -20,18 +20,19 @@ function Calendar({
             showOutsideDays={showOutsideDays}
             className={cn("p-3", className)}
             classNames={{
-                months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
+                months: "relative flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
                 month: "space-y-4",
-                month_caption: "flex justify-center pt-1 relative items-center",
+                month_caption:
+                    "flex justify-center pt-1 px-10 relative items-center",
                 caption_label: "text-sm font-medium",
-                nav: "space-x-1 flex items-center",
+                nav: "pointer-events-none absolute inset-x-3 z-20 flex items-center justify-between",
                 button_previous: cn(
                     buttonVariants({ variant: "outline" }),
-                    "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute left-1",
+                    "pointer-events-auto h-8 w-8 bg-background p-0 opacity-70 hover:opacity-100",
                 ),
                 button_next: cn(
                     buttonVariants({ variant: "outline" }),
-                    "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute right-1",
+                    "pointer-events-auto h-8 w-8 bg-background p-0 opacity-70 hover:opacity-100",
                 ),
                 month_grid: "w-full border-collapse space-y-1",
                 weekdays: "flex",