diff --git a/packages/ui/components/form/datepicker/DatePicker.tsx b/packages/ui/components/form/datepicker/DatePicker.tsx
index cf462dd58c..ae13bd42e9 100644
--- a/packages/ui/components/form/datepicker/DatePicker.tsx
+++ b/packages/ui/components/form/datepicker/DatePicker.tsx
@@ -45,12 +45,15 @@ const DatePicker = ({ minDate, disabled, date, onDatesChange, className }: Props
             {date ? <>{format(date, "LLL dd, y")}</> : <span>Pick a date</span>}
           </Button>
         </Popover.Trigger>
+        <Popover.Portal>
         <Popover.Content
           className="bg-default text-emphasis z-50 w-auto rounded-md border p-0 outline-none"
           align="start"
-          sideOffset={4}>
+          sideOffset={4}
+          >
           {calender}
         </Popover.Content>
+        </Popover.Portal>
       </Popover.Root>
     </div>
   );