diff --git a/apps/mail/components/create/schedule-send-picker.tsx b/apps/mail/components/create/schedule-send-picker.tsx
index 3288e86783..c75f434246 100644
--- a/apps/mail/components/create/schedule-send-picker.tsx
+++ b/apps/mail/components/create/schedule-send-picker.tsx
@@ -1,9 +1,15 @@
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
-import { Clock } from 'lucide-react';
-import { format, isValid } from 'date-fns';
-import { useState, useEffect } from 'react';
+import { Clock, Calendar as CalendarIcon } from 'lucide-react';
+import { format, startOfToday } from 'date-fns';
+import { useState, useCallback } from 'react';
 import { cn } from '@/lib/utils';
 import { toast } from 'sonner';
+import { Calendar } from '@/components/ui/calendar';
+import { Input } from '@/components/ui/input';
+
+const pad2 = (n: number) => n.toString().padStart(2, '0');
+const getLocalTimeFromDate = (d: Date) => `${pad2(d.getHours())}:${pad2(d.getMinutes())}`;
+const getNowTime = () => getLocalTimeFromDate(new Date());
 
 interface ScheduleSendPickerProps {
   value?: string | undefined;
@@ -12,107 +18,191 @@ interface ScheduleSendPickerProps {
   onValidityChange?: (isValid: boolean) => void;
 }
 
-const toLocalInputValue = (date: Date) => {
-  const tzOffsetMs = date.getTimezoneOffset() * 60 * 1000;
-  const local = new Date(date.getTime() - tzOffsetMs);
-  return local.toISOString().slice(0, 16);
-};
-
 export const ScheduleSendPicker: React.FC<ScheduleSendPickerProps> = ({
   value,
   onChange,
   className,
   onValidityChange,
 }) => {
-  const [isOpen, setIsOpen] = useState(false);
+  const [datePickerOpen, setDatePickerOpen] = useState(false);
+  const [timePickerOpen, setTimePickerOpen] = useState(false);
 
-  const [localValue, setLocalValue] = useState<string>(() => {
-    if (value) {
-      const d = new Date(value);
-      if (!isNaN(d.getTime())) return toLocalInputValue(d);
-    }
-    return '';
-  });
-
-  useEffect(() => {
-    if (value) {
-      const d = new Date(value);
-      if (!isNaN(d.getTime())) {
-        setLocalValue(toLocalInputValue(d));
-      }
-    } else {
-      setLocalValue('');
-    }
-  }, [value]);
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const val = e.target.value;
-    setLocalValue(val);
+  const isScheduling = !!value;
+  const selectedDate = value ? new Date(value) : undefined;
+  const time = value ? getLocalTimeFromDate(new Date(value)) : getNowTime();
 
-    if (!val) {
+  const emitChange = useCallback((datePart: Date | undefined, timePart: string, validate: boolean = false) => {
+    if (!datePart) {
       onChange(undefined);
-      onValidityChange?.(true);
+      if (validate) {
+        onValidityChange?.(true);
+      }
       return;
     }
 
-    const maybeDate = new Date(val);
+    const [hhStr, mmStr = '00'] = timePart.split(':');
+    const hours = Number(hhStr);
+    const minutes = Number(mmStr);
 
-    // Invalid date string
-    if (isNaN(maybeDate.getTime())) {
-      onValidityChange?.(false);
+    if (Number.isNaN(hours) || Number.isNaN(minutes) || hours < 0 || hours > 23 || minutes < 0 || minutes > 59) {
+      if (validate) {
+        onValidityChange?.(false);
+      }
       return;
     }
 
-    const now = new Date();
-    if (maybeDate.getTime() < now.getTime()) {
+    const combinedDate = new Date(datePart);
+    combinedDate.setHours(hours, minutes, 0, 0);
+
+    if (validate && combinedDate.getTime() < Date.now()) {
       toast.error('Scheduled time cannot be in the past');
       onValidityChange?.(false);
       return;
     }
 
-    onValidityChange?.(true);
-    onChange(maybeDate.toISOString());
+    if (validate) {
+      onValidityChange?.(true);
+    }
+    onChange(combinedDate.toISOString());
+  }, [onChange, onValidityChange]);
+
+  const handleDateSelect = useCallback((d?: Date) => {
+    emitChange(d, time, false);
+  }, [emitChange, time]);
+
+  const handleTimeChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const val = e.target.value;
+    emitChange(selectedDate, val, false);
+  }, [selectedDate, emitChange]);
+
+  const handleDatePickerClose = useCallback((open: boolean) => {
+    setDatePickerOpen(open);
+    if (!open && selectedDate) {
+      emitChange(selectedDate, time, true);
+    }
+  }, [selectedDate, time, emitChange]);
+
+  const handleTimePickerClose = useCallback((open: boolean) => {
+    setTimePickerOpen(open);
+    if (!open && selectedDate) {
+      emitChange(selectedDate, time, true);
+    }
+  }, [selectedDate, time, emitChange]);
+
+  const handleToggleScheduling = useCallback(() => {
+    if (isScheduling) {
+      onChange(undefined);
+    } else {
+      const now = new Date();
+      emitChange(now, getNowTime());
+    }
+  }, [isScheduling, onChange, emitChange]);
+
+  const formatTime12Hour = (timeStr: string) => {
+    try {
+      const [hhStr, mmStr = '00'] = timeStr.split(':');
+      const preview = new Date();
+      preview.setHours(Number(hhStr), Number(mmStr), 0, 0);
+      return format(preview, 'hh:mm aaa');
+    } catch {
+      return timeStr;
+    }
   };
 
-  const displayValue = localValue || toLocalInputValue(new Date());
+  const triggerLabel = (() => {
+    if (!selectedDate) return 'Send later';
+    try {
+      const formattedTime = formatTime12Hour(time);
+      const formattedDate = format(selectedDate, 'dd MMM yyyy');
+      return `${formattedDate} ${formattedTime}`;
+    } catch {
+      return 'Send later';
+    }
+  })();
+
+  if (isScheduling) {
+    return (
+      <>
+        <Popover open={datePickerOpen} onOpenChange={handleDatePickerClose}>
+          <PopoverTrigger asChild>
+            <button
+              type="button"
+              className={cn(
+                'flex items-center gap-1 rounded-md border px-2 py-1 text-sm hover:bg-accent',
+                className,
+              )}
+            >
+              <CalendarIcon className="h-4 w-4" />
+              <span>
+                {selectedDate ? format(selectedDate, 'dd MMM yyyy') : 'Select Date'}
+              </span>
+            </button>
+          </PopoverTrigger>
+          <PopoverContent className="z-[100] w-auto p-4" align="start" side="top" sideOffset={8}>
+            <div className="space-y-4">
+              <Calendar
+                mode="single"
+                selected={selectedDate}
+                onSelect={handleDateSelect}
+                disabled={{ before: startOfToday() }}
+                className="rounded-md"
+                captionLayout="dropdown"
+              />
+            </div>
+          </PopoverContent>
+        </Popover>
+
+        <Popover open={timePickerOpen} onOpenChange={handleTimePickerClose}>
+          <PopoverTrigger asChild>
+            <button
+              type="button"
+              className={cn(
+                'flex items-center gap-1 rounded-md border px-2 py-1 text-sm hover:bg-accent',
+                className,
+              )}
+            >
+              <Clock className="h-4 w-4" />
+              <span>{formatTime12Hour(time)}</span>
+            </button>
+          </PopoverTrigger>
+          <PopoverContent className="z-[100] w-auto p-4" align="start" side="top" sideOffset={8}>
+            <div className="space-y-4">
+              <h3 className="text-sm font-medium">Select Time</h3>
+              <Input
+                type="time"
+                value={time}
+                onChange={handleTimeChange}
+                className="w-full"
+              />
+            </div>
+          </PopoverContent>
+        </Popover>
 
-  return (
-    <Popover open={isOpen} onOpenChange={setIsOpen}>
-      <PopoverTrigger asChild>
         <button
           type="button"
+          onClick={handleToggleScheduling}
           className={cn(
             'flex items-center gap-1 rounded-md border px-2 py-1 text-sm hover:bg-accent',
             className,
           )}
         >
-          <Clock className="h-4 w-4" />
-          <span>
-            {(() => {
-              if (!localValue) return 'Send later';
-              const parsed = new Date(localValue);
-              if (!isValid(parsed)) return 'Send later';
-              try {
-                return format(parsed, 'dd MMM yyyy hh:mm aaa');
-              } catch (error) {
-                console.error('Error formatting date', error);
-                return 'Send later';
-              }
-            })()}
-          </span>
+          <span>Cancel</span>
         </button>
-      </PopoverTrigger>
-      <PopoverContent className="z-[100] w-64 p-4" align="start" side="top" sideOffset={8}>
-        <div className="flex flex-col gap-4">
-          <label className="text-sm font-semibold">Choose date & time</label>
-          <input
-            type="datetime-local"
-            value={displayValue}
-            onChange={handleChange}
-            className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:opacity-0"
-          />
-        </div>
-      </PopoverContent>
-    </Popover>
+      </>
+    );
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={handleToggleScheduling}
+      className={cn(
+        'flex items-center gap-1 rounded-md border px-2 py-1 text-sm hover:bg-accent',
+        className,
+      )}
+    >
+      <Clock className="h-4 w-4" />
+      <span>{triggerLabel}</span>
+    </button>
   );
 };
\ No newline at end of file
diff --git a/apps/mail/components/ui/calendar.tsx b/apps/mail/components/ui/calendar.tsx
index 158c0a9ed3..2f3c9ae6b7 100644
--- a/apps/mail/components/ui/calendar.tsx
+++ b/apps/mail/components/ui/calendar.tsx
@@ -1,17 +1,60 @@
 import { ChevronLeft, ChevronRight } from 'lucide-react';
 import { DayPicker } from 'react-day-picker';
 import * as React from 'react';
+import { useCallback, useMemo } from 'react';
+import { addMonths, subMonths, getYear, getMonth, setYear, setMonth, format } from 'date-fns';
 
 import { buttonVariants } from '@/components/ui/button';
 import { cn } from '@/lib/utils';
 
-export type CalendarProps = React.ComponentProps<typeof DayPicker>;
+export type CalendarProps = React.ComponentProps<typeof DayPicker> & {
+  yearRange?: number; 
+};
+
+function Calendar({ className, classNames, showOutsideDays = true, captionLayout, yearRange = 10, ...props }: CalendarProps) {
+  const [currentMonth, setCurrentMonth] = React.useState(new Date());
+  
+  const years = useMemo(() => Array.from({ length: yearRange }, (_, i) => new Date().getFullYear() + i), [yearRange]);
+  
+  const handleMonthChange = useCallback((monthIndex: string) => {
+    const parsedMonth = parseInt(monthIndex, 10);
+    
+    
+    if (!Number.isFinite(parsedMonth) || parsedMonth < 0 || parsedMonth > 11) {
+      console.warn(`Invalid month value: ${monthIndex}. Expected 0-11, got ${parsedMonth}`);
+      return;
+    }
+    
+    const newDate = setMonth(currentMonth, parsedMonth);
+    setCurrentMonth(newDate);
+  }, [currentMonth]);
+  
+  const handleYearChange = useCallback((year: string) => {
+    const parsedYear = parseInt(year, 10);
+    if (!Number.isFinite(parsedYear) || parsedYear < 1900 || parsedYear > 2100) {
+      console.warn(`Invalid year value: ${year}. Expected 1900-2100, got ${parsedYear}`);
+      return; 
+    }
+    
+    const newDate = setYear(currentMonth, parsedYear);
+    setCurrentMonth(newDate);
+  }, [currentMonth]);
+
+  const handlePreviousMonth = useCallback((displayMonth: Date) => {
+    setCurrentMonth(subMonths(displayMonth, 1));
+  }, []);
+
+  const handleNextMonth = useCallback((displayMonth: Date) => {
+    setCurrentMonth(addMonths(displayMonth, 1));
+  }, []);
 
-function Calendar({ className, classNames, showOutsideDays = true, ...props }: CalendarProps) {
   return (
     <DayPicker
       showOutsideDays={showOutsideDays}
       className={cn('p-3', className)}
+      month={currentMonth}
+      onMonthChange={setCurrentMonth}
+      captionLayout={captionLayout}
       classNames={{
         months: 'flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0',
         month: 'space-y-4',
@@ -51,6 +94,58 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }: C
         IconRight: ({ className, ...props }) => (
           <ChevronRight className={cn('h-4 w-4', className)} {...props} />
         ),
+        Caption: ({ displayMonth }) => (
+          <div className="flex items-center justify-between w-full px-1">
+            <button
+              onClick={() => handlePreviousMonth(displayMonth)}
+              className={cn(
+                buttonVariants({ variant: 'outline' }),
+                'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100'
+              )}
+            >
+              <ChevronLeft className="h-4 w-4" />
+            </button>
+            
+            <div className="flex items-center gap-3 -ml-2">
+              <select 
+                value={getMonth(displayMonth).toString()} 
+                onChange={(e) => handleMonthChange(e.target.value)}
+                className="h-8 w-[100px] rounded-md bg-transparent px-2 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-ring border-none text-center"
+              >
+                {Array.from({ length: 12 }, (_, i) => {
+                  const monthDate = new Date(2024, i, 1);
+                  return (
+                    <option key={i} value={i.toString()}>
+                      {format(monthDate, 'MMMM')}
+                    </option>
+                  );
+                })}
+              </select>
+              
+              <select 
+                value={getYear(displayMonth).toString()} 
+                onChange={(e) => handleYearChange(e.target.value)}
+                className="h-8 w-[80px] rounded-md bg-transparent px-2 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-ring border-none text-center"
+              >
+                {years.map((year) => (
+                  <option key={year} value={year.toString()}>
+                    {year}
+                  </option>
+                ))}
+              </select>
+            </div>
+            
+            <button
+              onClick={() => handleNextMonth(displayMonth)}
+              className={cn(
+                buttonVariants({ variant: 'outline' }),
+                'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100'
+              )}
+            >
+              <ChevronRight className="h-4 w-4" />
+            </button>
+          </div>
+        ),
       }}
       {...props}
     />