diff --git a/components/pages/calendar/EditEventDialog.tsx b/components/pages/calendar/EditEventDialog.tsx
index 2bd7282..25a67a4 100644
--- a/components/pages/calendar/EditEventDialog.tsx
+++ b/components/pages/calendar/EditEventDialog.tsx
@@ -123,6 +123,7 @@ const EditEventDialog = (editEventProps: IEditEventDialog) => {
               value={event.start}
               text70
               marginL-8
+              maximumDate={event.end}
               onChange={(date) => {
                 setEvent((prev) => ({ ...prev, start: date }));
               }}
@@ -134,6 +135,11 @@ const EditEventDialog = (editEventProps: IEditEventDialog) => {
             onChange={(date) => {
               setEvent((prev) => ({ ...prev, start: date }));
             }}
+            maximumDate={event.end}
+            dateTimeFormatter={(date, mode) => date.toLocaleTimeString("en-us",
+                { hour: "numeric",
+                        minute: "numeric"
+                        })}
             mode="time"
             marginR-30
           />
@@ -145,6 +151,7 @@ const EditEventDialog = (editEventProps: IEditEventDialog) => {
               <Feather name="calendar" size={25} color="#919191" />
               <DateTimePicker
                 value={event.end}
+                minimumDate={event.start}
                 text70
                 marginL-8
                 onChange={(date) => {
@@ -155,9 +162,14 @@ const EditEventDialog = (editEventProps: IEditEventDialog) => {
             <DateTimePicker
               text70
               value={event.end}
+              minimumDate={event.start}
               onChange={(date) => {
                 setEvent((prev) => ({ ...prev, end: date }));
               }}
+              dateTimeFormatter={(date, mode) => date.toLocaleTimeString("en-us",
+                  { hour: "numeric",
+                            minute: "numeric"
+                          })}
               mode="time"
               marginR-30
             />
diff --git a/components/pages/calendar/ManuallyAddEventModal.tsx b/components/pages/calendar/ManuallyAddEventModal.tsx
index b0db46b..c3f72f5 100644
--- a/components/pages/calendar/ManuallyAddEventModal.tsx
+++ b/components/pages/calendar/ManuallyAddEventModal.tsx
@@ -69,7 +69,7 @@ export const ManuallyAddEventModal = ({
     return date;
   });
   const [endTime, setEndTime] = useState(() => {
-    const date = initialDate ? addHours(initialDate, 1) : new Date();
+    const date = initialDate ? addHours(initialDate, 1) : addHours(new Date(), 1);
     date.setSeconds(0, 0);
     return date;
   });
@@ -243,14 +243,27 @@ export const ManuallyAddEventModal = ({
                 <Feather name="calendar" size={25} color="#919191" />
                 <DateTimePicker
                   value={startDate}
-                  text70
-                  marginL-8
                   onChange={(date) => {
                     setStartDate(date);
                   }}
+                  maximumDate={endDate}
+                  text70
+                  marginL-8
                 />
               </View>
-              <DateTimePicker text70 value={startDate} mode="time" marginR-30/>
+              <DateTimePicker
+                  value={startTime}
+                  onChange={(date) => setStartTime(date)}
+                  maximumDate={endTime}
+                  minuteInterval={5}
+                  dateTimeFormatter={(date, mode) => date.toLocaleTimeString("en-us",
+                      { hour: "numeric",
+                                minute: "numeric"
+                              })}
+                  mode="time"
+                  text70
+                  marginR-30
+              />
             </View>
 
             {!isAllDay && <View row marginB-10 spread>
@@ -258,6 +271,7 @@ export const ManuallyAddEventModal = ({
                 <Feather name="calendar" size={25} color="#919191" />
                 <DateTimePicker
                   value={endDate}
+                  minimumDate={startDate}
                   text70
                   marginL-8
                   onChange={(date) => {
@@ -265,7 +279,19 @@ export const ManuallyAddEventModal = ({
                   }}
                 />
               </View>
-              <DateTimePicker text70 value={endDate} mode="time" marginR-30/>
+              <DateTimePicker
+                  value={endTime}
+                  onChange={(date) => setEndTime(date)}
+                  minimumDate={startTime}
+                  minuteInterval={5}
+                  dateTimeFormatter={(date, mode) => date.toLocaleTimeString("en-us",
+                      { hour: "numeric",
+                                minute: "numeric"
+                              })}
+                  mode="time"
+                  text70
+                  marginR-30
+              />
             </View>}
           </View>