diff --git a/app/components/CalendarModalButton.tsx b/app/components/CalendarModalButton.tsx
index 6e9bb95..f997346 100644
--- a/app/components/CalendarModalButton.tsx
+++ b/app/components/CalendarModalButton.tsx
@@ -17,6 +17,13 @@ import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 
+import Alert from '@mui/material/Alert';
+import IconButton from '@mui/material/IconButton';
+import Collapse from '@mui/material/Collapse';
+import CloseIcon from '@mui/icons-material/Close';
+
+
+
 const style = {
     position: 'absolute' as 'absolute',
     top: '50%',
@@ -72,17 +79,46 @@ const initialFormData = {
 const CalendarModalButton: FC <any> = ({callback}) => {    
     const [open, setOpen] = useState(false);
     const handleOpen = () => setOpen(true);
-    const handleClose = () => setOpen(false);
+    const handleClose = () => {
+        setFormData(initialFormData);
+        setOpen(false);
+    }
 
     const [startDate, setStartDate] = useState(new Date());
     const [endDate, setEndDate] = useState(new Date());
     const [formData, setFormData] = useState(initialFormData);
 
+    // For Date/Time (Add Shift) validation
+    const [timeError, setTimeError] = useState(true);
+
+    // Allows for the update of the validation to happen in real-time despite asynchronosity of formdata
+    useEffect(() => {
+        validateTime();
+    }, [formData]);
+
+
     // Handle form input change
     const handleInputChange = (e) => {
         const { name, value } = e.target;
         setFormData((prevData) => ({ ...prevData, [name]: value }));
     };
+
+    const validateTime = () => {
+        let startingDate = new Date(formData.startDate);
+        let endingDate = new Date(formData.endDate);
+
+        startingDate.setHours(formData.startTime)
+        endingDate.setHours(formData.endTime)
+
+        let timeDifference = endingDate.getTime() - startingDate.getTime();
+
+        // Invalid time combination is if end time occurs before start time:
+        if (timeDifference <= 0) {
+            setTimeError(true);
+        } else {
+            setTimeError(false);
+        }
+    }
     
     // Handle form submission (IN PROGRESS)
     const handleSubmit = async (e) => {
@@ -174,148 +210,162 @@ const CalendarModalButton: FC <any> = ({callback}) => {
                 </Typography>
             </Box>
             <Box>
-        <form onSubmit={handleSubmit}>
-            <Grid container spacing={5} columnSpacing={{xs: 10, sm:80, md:5, lg:5}} justify-content='flex-start' alignItems='flex-start' columns={12}  margin={{xs: 1, sm: 2, md: 3, lg: 4}}>
-                
-                <Grid container spacing={4}  direction='column' alignItems='flex-start'  paddingBottom='13%'>
-                    <Grid container direction="row" justifyContent={'flex-end'} xs ={12} sm={12} md={12} lg={12}sx={{marginTop: '20px', marginLeft: '-130px' }}>
-                        <Typography variant="h4"  sx={{marginTop: '15px', marginRight: '10px'}}>
-                        Start Time: 
-                        </Typography>
-
-                        {/* Start Date */}
-                        <LocalizationProvider dateAdapter={AdapterDayjs}>
-                            <DatePicker 
-                                label="Start Date"
-                                onChange={(newValue) => setStartDate(new Date(newValue))} 
-                                sx={{  marginRight: '10px',width: '180px' }}
-                                />
-                        </LocalizationProvider>
-                        
-                        <Select
-                            name="startTime"
-                            value={formData.startTime}
-                            onChange={handleInputChange}
-                            sx={{ borderRadius: '10px',  width: "190px", backgroundColor: "#FFFFFF", outlineColor: "#000000", height: '56px'}}
-                        >
-                        <MenuItem value={0}>12:00 am</MenuItem>
-                        <MenuItem value={1}>1:00 am</MenuItem>
-                        <MenuItem value={2}>2:00 am</MenuItem>
-                        <MenuItem value={3}>3:00 am</MenuItem>
-                        <MenuItem value={4}>4:00 am</MenuItem>
-                        <MenuItem value={5}>5:00 am</MenuItem>
-                        <MenuItem value={6}>6:00 am</MenuItem>
-                        <MenuItem value={7}>7:00 am</MenuItem>
-                        <MenuItem value={8}>8:00 am</MenuItem>
-                        <MenuItem value={9}>9:00 am</MenuItem>
-                        <MenuItem value={10}>10:00 am</MenuItem>
-                        <MenuItem value={11}>11:00 am</MenuItem>
-                        <MenuItem value={12}>12:00 pm</MenuItem>
-                        <MenuItem value={13}>1:00 pm</MenuItem>
-                        <MenuItem value={14}>2:00 pm</MenuItem>
-                        <MenuItem value={15}>3:00 pm</MenuItem>
-                        <MenuItem value={16}>4:00 pm</MenuItem>
-                        <MenuItem value={17}>5:00 pm</MenuItem>
-                        <MenuItem value={18}>6:00 pm</MenuItem>
-                        <MenuItem value={19}>7:00 pm</MenuItem>
-                        <MenuItem value={20}>8:00 pm</MenuItem>
-                        <MenuItem value={21}>9:00 pm</MenuItem>
-                        <MenuItem value={22}>10:00 pm</MenuItem>
-                        <MenuItem value={23}>11:00 pm</MenuItem>
-                    </Select>
-                    </Grid>
-                    <Grid container direction="row" xs ={12} sm={12} md={12} lg={12} sx={{marginTop: '18px', marginLeft: '-130px', justifyContent: 'flex-end' }}>
-                        <Typography variant="h4" sx={{marginTop: '15px', marginRight: '10px' }}>
-                        End Time: 
-                        </Typography>
-                        <LocalizationProvider dateAdapter={AdapterDayjs}>
-                            <div component={['DatePicker']} >
-                                <DatePicker 
-                                    label="End Date"
-                                    onChange={(newValue) => setEndDate(new Date(newValue))} 
-                                    sx={{ marginRight: '10px',width: '180px' }}
-                                />
-                            </div>
-                        </LocalizationProvider>
-                        
-                        <Select
-                            name="endTime"
-                            value={formData.endTime}
-                            onChange={handleInputChange}
-                            sx={{ borderRadius: '10px',  width: "190px", backgroundColor: "#FFFFFF", outlineColor: "#000000", height: '56px'}}
-                        >
-                            <MenuItem value={0}>12:00 am</MenuItem>
-                            <MenuItem value={1}>1:00 am</MenuItem>
-                            <MenuItem value={2}>2:00 am</MenuItem>
-                            <MenuItem value={3}>3:00 am</MenuItem>
-                            <MenuItem value={4}>4:00 am</MenuItem>
-                            <MenuItem value={5}>5:00 am</MenuItem>
-                            <MenuItem value={6}>6:00 am</MenuItem>
-                            <MenuItem value={7}>7:00 am</MenuItem>
-                            <MenuItem value={8}>8:00 am</MenuItem>
-                            <MenuItem value={9}>9:00 am</MenuItem>
-                            <MenuItem value={10}>10:00 am</MenuItem>
-                            <MenuItem value={11}>11:00 am</MenuItem>
-                            <MenuItem value={12}>12:00 pm</MenuItem>
-                            <MenuItem value={13}>1:00 pm</MenuItem>
-                            <MenuItem value={14}>2:00 pm</MenuItem>
-                            <MenuItem value={15}>3:00 pm</MenuItem>
-                            <MenuItem value={16}>4:00 pm</MenuItem>
-                            <MenuItem value={17}>5:00 pm</MenuItem>
-                            <MenuItem value={18}>6:00 pm</MenuItem>
-                            <MenuItem value={19}>7:00 pm</MenuItem>
-                            <MenuItem value={20}>8:00 pm</MenuItem>
-                            <MenuItem value={21}>9:00 pm</MenuItem>
-                            <MenuItem value={22}>10:00 pm</MenuItem>
-                            <MenuItem value={23}>11:00 pm</MenuItem>
-                        </Select>
-                    </Grid>
-                    <Grid container direction="row" xs ={12} sm={12} md={12} lg={12}sx={{ marginTop: '18px', marginLeft: '-130px', justifyContent: 'flex-end' }}>
-                        <Typography variant="h4" sx={{ marginTop: '15px', marginRight: '114px' }}>
-                        Assigned Employee: 
-                        </Typography>
-                        <Select
-                            name="assignedEmployee"
-                            value={formData.assignedEmployee}
-                            onChange={handleInputChange}
-                            sx={{ borderRadius: '10px',  width: "190px", backgroundColor: "#FFFFFF", outlineColor: "#000000", height: '56px'}}
-                        >
-                        <MenuItem value={'Carly Seigel'}>Carly Seigel</MenuItem>
-                        <MenuItem value={'Eliana Longoria-Valenzuela'}>Eliana Longoria-Valenzuela</MenuItem>
-                    </Select>
-                    </Grid>
-                    <Grid container direction="row" xs ={12} sm={12} md={12} lg={12}sx={{ marginTop: '18px', marginLeft: '-130px', justifyContent: 'flex-end' }}>
-                        <Typography variant="h4" sx={{ marginTop: '15px',marginRight: '182px' }}>
-                        Phone Line: 
-                        </Typography>
-                            <Select
-                            name="phoneLine"
-                            value={formData.phoneLine}
-                            onChange={handleInputChange}
-                            sx={{ borderRadius: '10px',  width: "190px", backgroundColor: "#FFFFFF", outlineColor: "#000000", height: '56px'}}
+                <form onSubmit={handleSubmit}>
+                    <Collapse in={timeError}>
+                        <Alert
+                            severity="error"
+                            sx={{ mb: 2 }}
                             >
-                            <MenuItem value={'1'}>1</MenuItem>
-                            <MenuItem value={'2'}>2</MenuItem>
-                            <MenuItem value={'3'}>3</MenuItem>
-                            <MenuItem value={'4'}>4</MenuItem>
-                            <MenuItem value={'5'}>5</MenuItem>
-                            <MenuItem value={'6'}>6</MenuItem>
+                        Please enter a valid date/time combination.
+                        </Alert>
+                    </Collapse>
+                    <Grid container spacing={5} columnSpacing={{xs: 10, sm:80, md:5, lg:5}} justify-content='flex-start' alignItems='flex-start' columns={12}  margin={{xs: 1, sm: 2, md: 3, lg: 4}}>
+                        
+                        <Grid container spacing={4}  direction='column' alignItems='flex-start'  paddingBottom='13%'>
+                            <Grid container direction="row" justifyContent={'flex-end'} xs ={12} sm={12} md={12} lg={12}sx={{marginTop: '20px', marginLeft: '-130px' }}>
+                                <Typography variant="h4"  sx={{marginTop: '15px', marginRight: '10px'}}>
+                                Start Time: 
+                                </Typography>
 
-                        </Select>
-                    </Grid>
-                    <Grid xs ={12} sm={12} md={12} lg={12} container spacing={6} justifyContent='flex-end' textAlign='center' sx ={{ marginTop: '1px', display:'flex', justifyContent:'center'}}>
-                        <Grid item xs={3}>
-                            <Button type="submit" sx={{ paddingLeft: '10%', textIndent:'5.5px', paddingRight:'10%', borderRadius:'10px', backgroundColor: theme.palette.primary.main, '&:hover': {backgroundColor:"#2E0057"}, textTransform: 'none'}} variant="contained">Cancel Shift</Button>
-                        </Grid>
-                        {/* ASSIGN SHIFT CONFIRMATION BUTTON (where we post shift) */}
-                        <Grid item xs={3}>
-                            <Button type="submit" variant="contained" sx={{ paddingLeft: '10%', textIndent:'5.5px', paddingRight:'10%', borderRadius:'10px', backgroundColor: theme.palette.secondary.main, '&:hover': {backgroundColor:"#89B839"}, textTransform: 'none'}} variant="contained">Assign Shift</Button>
-                        </Grid>
-                    </Grid>
-                    </Grid>    
-                    </Grid> 
-                </form>                           
-                </Box>
+                                {/* Start Date */}
+                                <LocalizationProvider dateAdapter={AdapterDayjs}>
+                                    <DatePicker 
+                                        label="Start Date"
+                                        onChange={(newValue) => {
+                                            setStartDate(new Date(newValue));
+                                            handleInputChange({ target: { name: 'startDate', value: newValue } });
+                                        }}
+                                        sx={{  marginRight: '10px',width: '180px' }}
+                                        />
+                                </LocalizationProvider>
+                                
+                                <Select
+                                    name="startTime"
+                                    value={formData.startTime}
+                                    onChange={handleInputChange}
+                                    sx={{ borderRadius: '10px',  width: "190px", backgroundColor: "#FFFFFF", outlineColor: "#000000", height: '56px'}}
+                                >
+                                <MenuItem value={0}>12:00 am</MenuItem>
+                                <MenuItem value={1}>1:00 am</MenuItem>
+                                <MenuItem value={2}>2:00 am</MenuItem>
+                                <MenuItem value={3}>3:00 am</MenuItem>
+                                <MenuItem value={4}>4:00 am</MenuItem>
+                                <MenuItem value={5}>5:00 am</MenuItem>
+                                <MenuItem value={6}>6:00 am</MenuItem>
+                                <MenuItem value={7}>7:00 am</MenuItem>
+                                <MenuItem value={8}>8:00 am</MenuItem>
+                                <MenuItem value={9}>9:00 am</MenuItem>
+                                <MenuItem value={10}>10:00 am</MenuItem>
+                                <MenuItem value={11}>11:00 am</MenuItem>
+                                <MenuItem value={12}>12:00 pm</MenuItem>
+                                <MenuItem value={13}>1:00 pm</MenuItem>
+                                <MenuItem value={14}>2:00 pm</MenuItem>
+                                <MenuItem value={15}>3:00 pm</MenuItem>
+                                <MenuItem value={16}>4:00 pm</MenuItem>
+                                <MenuItem value={17}>5:00 pm</MenuItem>
+                                <MenuItem value={18}>6:00 pm</MenuItem>
+                                <MenuItem value={19}>7:00 pm</MenuItem>
+                                <MenuItem value={20}>8:00 pm</MenuItem>
+                                <MenuItem value={21}>9:00 pm</MenuItem>
+                                <MenuItem value={22}>10:00 pm</MenuItem>
+                                <MenuItem value={23}>11:00 pm</MenuItem>
+                            </Select>
+                            </Grid>
+                            <Grid container direction="row" xs ={12} sm={12} md={12} lg={12} sx={{marginTop: '18px', marginLeft: '-130px', justifyContent: 'flex-end' }}>
+                                <Typography variant="h4" sx={{marginTop: '15px', marginRight: '10px' }}>
+                                End Time: 
+                                </Typography>
+                                <LocalizationProvider dateAdapter={AdapterDayjs}>
+                                    <div component={['DatePicker']} >
+                                        <DatePicker 
+                                            label="End Date"
+                                            onChange={(newValue) => {
+                                                setEndDate(new Date(newValue));
+                                                handleInputChange({ target: { name: 'endDate', value: newValue } });
+                                            }} 
+                                            sx={{ marginRight: '10px',width: '180px' }}
+                                        />
+                                    </div>
+                                </LocalizationProvider>
+                                
+                                <Select
+                                    name="endTime"
+                                    value={formData.endTime}
+                                    onChange={handleInputChange}
+                                    sx={{ borderRadius: '10px',  width: "190px", backgroundColor: "#FFFFFF", outlineColor: "#000000", height: '56px'}}
+                                >
+                                    <MenuItem value={0}>12:00 am</MenuItem>
+                                    <MenuItem value={1}>1:00 am</MenuItem>
+                                    <MenuItem value={2}>2:00 am</MenuItem>
+                                    <MenuItem value={3}>3:00 am</MenuItem>
+                                    <MenuItem value={4}>4:00 am</MenuItem>
+                                    <MenuItem value={5}>5:00 am</MenuItem>
+                                    <MenuItem value={6}>6:00 am</MenuItem>
+                                    <MenuItem value={7}>7:00 am</MenuItem>
+                                    <MenuItem value={8}>8:00 am</MenuItem>
+                                    <MenuItem value={9}>9:00 am</MenuItem>
+                                    <MenuItem value={10}>10:00 am</MenuItem>
+                                    <MenuItem value={11}>11:00 am</MenuItem>
+                                    <MenuItem value={12}>12:00 pm</MenuItem>
+                                    <MenuItem value={13}>1:00 pm</MenuItem>
+                                    <MenuItem value={14}>2:00 pm</MenuItem>
+                                    <MenuItem value={15}>3:00 pm</MenuItem>
+                                    <MenuItem value={16}>4:00 pm</MenuItem>
+                                    <MenuItem value={17}>5:00 pm</MenuItem>
+                                    <MenuItem value={18}>6:00 pm</MenuItem>
+                                    <MenuItem value={19}>7:00 pm</MenuItem>
+                                    <MenuItem value={20}>8:00 pm</MenuItem>
+                                    <MenuItem value={21}>9:00 pm</MenuItem>
+                                    <MenuItem value={22}>10:00 pm</MenuItem>
+                                    <MenuItem value={23}>11:00 pm</MenuItem>
+                                </Select>
+                            </Grid>
+                            <Grid container direction="row" xs ={12} sm={12} md={12} lg={12}sx={{ marginTop: '18px', marginLeft: '-130px', justifyContent: 'flex-end' }}>
+                                <Typography variant="h4" sx={{ marginTop: '15px', marginRight: '114px' }}>
+                                Assigned Employee: 
+                                </Typography>
+                                <Select
+                                    name="assignedEmployee"
+                                    value={formData.assignedEmployee}
+                                    onChange={handleInputChange}
+                                    sx={{ borderRadius: '10px',  width: "190px", backgroundColor: "#FFFFFF", outlineColor: "#000000", height: '56px'}}
+                                >
+                                <MenuItem value={'Carly Seigel'}>Carly Seigel</MenuItem>
+                                <MenuItem value={'Eliana Longoria-Valenzuela'}>Eliana Longoria-Valenzuela</MenuItem>
+                            </Select>
+                            </Grid>
+                            <Grid container direction="row" xs ={12} sm={12} md={12} lg={12}sx={{ marginTop: '18px', marginLeft: '-130px', justifyContent: 'flex-end' }}>
+                                <Typography variant="h4" sx={{ marginTop: '15px',marginRight: '182px' }}>
+                                Phone Line: 
+                                </Typography>
+                                    <Select
+                                    name="phoneLine"
+                                    value={formData.phoneLine}
+                                    onChange={handleInputChange}
+                                    sx={{ borderRadius: '10px',  width: "190px", backgroundColor: "#FFFFFF", outlineColor: "#000000", height: '56px'}}
+                                    >
+                                    <MenuItem value={'1'}>1</MenuItem>
+                                    <MenuItem value={'2'}>2</MenuItem>
+                                    <MenuItem value={'3'}>3</MenuItem>
+                                    <MenuItem value={'4'}>4</MenuItem>
+                                    <MenuItem value={'5'}>5</MenuItem>
+                                    <MenuItem value={'6'}>6</MenuItem>
+
+                                </Select>
+                            </Grid>
+                            <Grid xs ={12} sm={12} md={12} lg={12} container spacing={6} justifyContent='flex-end' textAlign='center' sx ={{ marginTop: '1px', display:'flex', justifyContent:'center'}}>
+                                <Grid item xs={3}>
+                                    <Button type="submit" sx={{ paddingLeft: '10%', textIndent:'5.5px', paddingRight:'10%', borderRadius:'10px', backgroundColor: theme.palette.primary.main, '&:hover': {backgroundColor:"#2E0057"}, textTransform: 'none'}} variant="contained">Cancel Shift</Button>
+                                </Grid>
+                                {/* ASSIGN SHIFT CONFIRMATION BUTTON (where we post shift) */}
+                                <Grid item xs={3}>
+                                    <Button type="submit" disabled={timeError} variant="contained" sx={{ paddingLeft: '10%', textIndent:'5.5px', paddingRight:'10%', borderRadius:'10px', backgroundColor: theme.palette.secondary.main, '&:hover': {backgroundColor:"#89B839"}, textTransform: 'none'}} variant="contained">Assign Shift</Button>
+                                </Grid>
+                            </Grid>
+                            </Grid>    
+                            </Grid> 
+                    </form>                           
+            </Box>
            
             </Box>
             </Modal>