diff --git a/client/src/components/manageProjects/editableMeeting.jsx b/client/src/components/manageProjects/editableMeeting.jsx
index 5a29945b2..4d4644a38 100644
--- a/client/src/components/manageProjects/editableMeeting.jsx
+++ b/client/src/components/manageProjects/editableMeeting.jsx
@@ -49,6 +49,7 @@ const EditableMeeting = ({
       handleInputChange={handleInputChange}
       formValues={formValues}
       formErrors={formErrors}
+      title="Edit Recurring Event"
     >
       <Box>
         <Button
diff --git a/client/src/components/manageProjects/eventForm.jsx b/client/src/components/manageProjects/eventForm.jsx
index f075575dd..7666fc669 100644
--- a/client/src/components/manageProjects/eventForm.jsx
+++ b/client/src/components/manageProjects/eventForm.jsx
@@ -1,5 +1,13 @@
 import React from 'react';
 import { createClockHours } from '../../utils/createClockHours';
+import {
+  Box,
+  TextField,
+  MenuItem,
+  Select,
+  FormControl,
+  InputLabel,
+} from '@mui/material';
 import '../../sass/ManageProjects.scss';
 
 const EventForm = ({
@@ -11,120 +19,133 @@ const EventForm = ({
 }) => {
   // This creates the clock hours for the form
   const clockHours = createClockHours();
+
   return (
-    <div className="event-form-box">
+    <Box className="event-form-box">
       {title && <h3 className="event-form-title">{title}</h3>}
-      <label className="event-form-label" htmlFor="name">
-        Event Name:
-        <input
+      <FormControl fullWidth>
+        <TextField
+          required
+          helperText={formErrors?.name ? formErrors?.name : ''}
+          error={formErrors?.name}
           id="name"
-          placeholder="Meeting name..."
           name="name"
           value={formValues.name}
+          label="Event Name:"
+          placeholder="Meeting name..."
           onChange={handleInputChange}
-          maxLength={30}
         />
-        {formErrors?.name &&
-          <div className="event-form-error">{formErrors.name}</div>
-        }
-      </label>
-      <div className="event-form-row">
-        <label className="event-form-label" htmlFor="eventType">
-          Event Type:
-          <select
-            id="eventType"
+      </FormControl>
+      <Box className="event-form-row">
+        <FormControl fullWidth>
+          <InputLabel id="event-type-label">Event Type</InputLabel>
+          <Select
+            labelId="event-type-label"
+            name="eventType"
             value={formValues.eventType}
+            label="Event Type"
             onChange={handleInputChange}
-            name="eventType"
           >
-            <option value="Team Meeting">Team Meeting</option>
-            <option value="Onboarding">Onboarding</option>
-          </select>
-        </label>
-        <label className="event-form-label" htmlFor="day">
-          Day of the Week:
-          <select
-            id="day"
+            <MenuItem value="Team Meeting">Team Meeting</MenuItem>
+            <MenuItem value="Onboarding">Onboarding</MenuItem>
+          </Select>
+        </FormControl>
+        <FormControl fullWidth>
+          <InputLabel id="day-input-label">Day of the Week</InputLabel>
+          <Select
+            labelId="day-input-label"
+            id="day-input"
+            name="day"
             value={formValues.day}
+            label="Day of the Week"
             onChange={handleInputChange}
-            name="day"
           >
-            <option value="0">Sunday</option>
-            <option value="1">Monday</option>
-            <option value="2">Tuesday</option>
-            <option value="3">Wednesday</option>
-            <option value="4">Thursday</option>
-            <option value="5">Friday</option>
-            <option value="6">Saturday</option>
-          </select>
-        </label>
-      </div>
-      <div className="event-form-row">
-        <label className="event-form-label" htmlFor="startTime">
-          Start Time:
-          <select
-            id="startTime"
+            <MenuItem value="0">Sunday</MenuItem>
+            <MenuItem value="1">Monday</MenuItem>
+            <MenuItem value="2">Tuesday</MenuItem>
+            <MenuItem value="3">Wednesday</MenuItem>
+            <MenuItem value="4">Thursday</MenuItem>
+            <MenuItem value="5">Friday</MenuItem>
+            <MenuItem value="6">Saturday</MenuItem>
+          </Select>
+        </FormControl>
+      </Box>
+      <Box className="event-form-row">
+        <FormControl fullWidth>
+          <InputLabel id="start-time-label">Start Time</InputLabel>
+          <Select
+            labelId="start-time-label"
+            name="startTime"
             value={formValues.startTime}
+            label="Start Time"
             onChange={handleInputChange}
-            name="startTime"
           >
             {clockHours.map((value) => {
               return (
-                <option key={value} value={value}>
+                <MenuItem key={value} value={value}>
                   {value}
-                </option>
+                </MenuItem>
               );
             })}
-          </select>
-        </label>
-        <label className="event-form-label" htmlFor="duration">
-          Duration:
-          <select
+          </Select>
+        </FormControl>
+        <FormControl fullWidth>
+          <InputLabel id="duration-label">Duration</InputLabel>
+          <Select
+            labelId="duration-label"
             id="duration"
+            name="duration"
             value={formValues.duration}
+            label="Duration"
             onChange={handleInputChange}
-            name="duration"
           >
-            <option value=".5">.5</option>
-            <option value="1">1</option>
-            <option value="1.5">1.5</option>
-            <option value="2">2</option>
-            <option value="2.5">2.5</option>
-            <option value="3">3</option>
-            <option value="3.5">3.5</option>
-            <option value="4">4</option>
-          </select>
-        </label>
-      </div>
-      <label className="event-form-label" htmlFor="description">
-        Description:
-        <input
-          id="description"
-          placeholder="Meeting description..."
-          name="description"
-          value={formValues.description}
-          onChange={handleInputChange}
-          maxLength={60}
-        />
-      </label>
-      <label className="event-form-label" htmlFor="videoConferenceLink">
-        Event Link:
-        <input
-          id="videoConferenceLink"
-          placeholder="Enter meeting url..."
-          name="videoConferenceLink"
-          value={formValues.videoConferenceLink}
-          onChange={handleInputChange}
-        />
-        {formErrors?.videoConferenceLink &&
-          <div className="event-form-error">
-            {formErrors.videoConferenceLink}
-          </div>
-        }
-      </label>
+            <MenuItem value=".5">.5</MenuItem>
+            <MenuItem value="1">1</MenuItem>
+            <MenuItem value="1.5">1.5</MenuItem>
+            <MenuItem value="2">2</MenuItem>
+            <MenuItem value="2.5">2.5</MenuItem>
+            <MenuItem value="3">3</MenuItem>
+            <MenuItem value="3.5">3.5</MenuItem>
+            <MenuItem value="4">4</MenuItem>
+          </Select>
+        </FormControl>
+      </Box>
+      <Box className="event-form-row">
+        <FormControl fullWidth>
+          <TextField
+            id="Description"
+            label="Description"
+            variant="outlined"
+            name="description"
+            fullWidth
+            value={formValues.description}
+            onChange={handleInputChange}
+          />
+        </FormControl>
+      </Box>
+      <Box className="event-form-row">
+        <FormControl fullWidth>
+          <TextField
+            required
+            helperText={
+              formErrors?.videoConferenceLink
+                ? formErrors?.videoConferenceLink
+                : ''
+            }
+            error={formErrors?.videoConferenceLink}
+            id="Meeting URL"
+            label="Meeting URL"
+            variant="outlined"
+            name="videoConferenceLink"
+            fullWidth
+            value={formValues.videoConferenceLink}
+            onChange={handleInputChange}
+          />
+        </FormControl>
+      </Box>
 
       {children}
-    </div>
+    </Box>
   );
 };
 
diff --git a/client/src/sass/CheckIn.scss b/client/src/sass/CheckIn.scss
index 694f1bd70..9317b3e86 100644
--- a/client/src/sass/CheckIn.scss
+++ b/client/src/sass/CheckIn.scss
@@ -1,162 +1,165 @@
 .check-in-container {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    z-index: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  z-index: 1;
 }
 
 .check-in-headers {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: flex-start;
-    text-align: left;
-    width: 300px;
-    max-width: 300px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  text-align: left;
+  width: 300px;
+  max-width: 300px;
 }
 
 .check-in-form {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    min-height: 30vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 30vh;
 }
 
 .form-check-in {
-    width: 300px;
-    max-width: 300px;
+  width: 300px;
+  max-width: 300px;
 }
 
 .form-row {
-    max-width: 300px;
-    width: 300px;
-    margin: 6px 0px;
-
-    p {
-        text-align: left;
-        font-weight: bold;
-        letter-spacing: .05em;
-    }
+  max-width: 300px;
+  width: 300px;
+  margin: 6px 0px;
+
+  p {
+    text-align: left;
+    font-weight: bold;
+    letter-spacing: .05em;
+  }
 }
 
 .last-row {
-    margin-top: 24px; 
+  margin-top: 24px;
 }
 
 .form-input-text {
-    display: flex;
-    flex-direction: column;
+  display: flex;
+  flex-direction: column;
 
-    label {
-        font-size: 14px;
-        font-weight: 100px;
-    }
+  label {
+    font-size: 14px;
+    font-weight: 100px;
+  }
 }
 
 label {
-    max-width: 300px;
-    width: 300px;
-    text-align: left;
-    font-size: 20px;
-    font-weight: bold;
-}
-
-input[type=text], input[type=email] {
-    -webkit-appearance: none;
-    max-width: 310px;
-    width: 310px;
-    height: 36px;
-    outline: none;
-    background-color: inherit;
-    border-top: none;
-    border-right: none;
-    border-bottom: 3px solid black;
-    border-left: none;
-    border-radius: 2px;
-    font-size: 24px;
-    padding: 0 4px;
-    margin: 4px 0px;
+  max-width: 300px;
+  width: 300px;
+  text-align: left;
+  font-size: 20px;
+  font-weight: bold;
+}
+
+// Following styles apply to all text fields including Material UI component <TextField>
+// Global styles help with UI consistency but can lead to style conflicts
+// Commented out styles that conflict with MUI component styling
+// See PR #1844
+
+input[type='text'],
+input[type='email'] {
+  -webkit-appearance: none;
+  // max-width: 310px;
+  // width: 310px;
+  // height: 36px;
+  outline: none;
+  background-color: inherit;
+  border-top: none;
+  border-right: none;
+  border-bottom: 3px solid black;
+  border-left: none;
+  border-radius: 2px;
+  font-size: 24px;
+  // padding: 0 4px;
+  margin: 4px 0px;
+  color: rgb(250, 17, 79);
+  font-weight: bold;
+  transition: all .3s ease-in-out;
+
+  &::placeholder {
     color: rgb(250, 17, 79);
-    font-weight: bold;
-    transition: all .3s ease-in-out;
+    font-weight: 200;
+  }
 
-    &::placeholder {
-        color: rgb(250, 17, 79);
-        font-weight: 200;
-    }
-
-    &:focus {
-        border-color: rgb(250, 17, 79);
-    }
+  &:focus {
+    border-color: rgb(250, 17, 79);
+  }
 }
 
 input[type=radio] {
-    transform: scale(1.8);
-    margin-right: 24px;
-    margin-top: 8px;
+  transform: scale(1.8);
+  margin-right: 24px;
+  margin-top: 8px;
 
-    &:checked {
-        background-color: black;
-        color: black;
-    }
+  &:checked {
+    background-color: black;
+    color: black;
+  }
 
-    &:checked:after {
-        background-color: black;
-        color: black;
-    }
+  &:checked:after {
+    background-color: black;
+    color: black;
+  }
 }
 
 .form-input-radio {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-content: center;
-    margin: 4px;
-
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-content: center;
+  margin: 4px;
 }
 
 .radio-buttons {
-    display: flex;
-    justify-content: space-around;
+  display: flex;
+  justify-content: space-around;
 }
 
 .first-time-select {
-    margin: 8px;
+  margin: 8px;
 }
 
-
 .form-input-button {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 300px;
-    height: 40px;
-    margin-top: 20px;
-    margin-bottom: 36px;
-    button {
-        border: 3px solid black;
-        border-radius: 4px;
-        font-weight: bold;
-        font-size: 18px;
-        font-weight: bold;
-        transition: all .3s ease-in-out;
-
-        &:hover {
-            background-color: black;
-            color: white;
-        }
-        &:disabled {
-            color: #bbb;
-            border-color: #bbb;
-            pointer-events: none;
-        }
-        
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 300px;
+  height: 40px;
+  margin-top: 20px;
+  margin-bottom: 36px;
+  button {
+    border: 3px solid black;
+    border-radius: 4px;
+    font-weight: bold;
+    font-size: 18px;
+    font-weight: bold;
+    transition: all .3s ease-in-out;
+
+    &:hover {
+      background-color: black;
+      color: white;
+    }
+    &:disabled {
+      color: #bbb;
+      border-color: #bbb;
+      pointer-events: none;
     }
+  }
 }
 
 input:-webkit-autofill,
-input:-webkit-autofill:hover, 
+input:-webkit-autofill:hover,
 input:-webkit-autofill:focus,
 textarea:-webkit-autofill,
 textarea:-webkit-autofill:hover,
@@ -172,33 +175,33 @@ select:-webkit-autofill:focus {
 }
 
 select {
-    width: 140px;
-    padding: 6px;
-    font-size: 16px;
-    font-weight: bold;
-    color: rgb(250, 17, 79);
-    background-color: inherit;
-    border: 3px solid black;
-    border-radius: 0px;
-    margin: 12px;
-
-    &:focus {
-        border: 3px solid rgb(250, 17, 79);
-        outline: none;
-    }
+  width: 140px;
+  padding: 6px;
+  font-size: 16px;
+  font-weight: bold;
+  color: rgb(250, 17, 79);
+  background-color: inherit;
+  border: 3px solid black;
+  border-radius: 0px;
+  margin: 12px;
+
+  &:focus {
+    border: 3px solid rgb(250, 17, 79);
+    outline: none;
+  }
 }
 
 .select-reason {
-    display: flex;
-    justify-content: space-around;
-    margin: 8px;
+  display: flex;
+  justify-content: space-around;
+  margin: 8px;
 
-    select {
-        min-width: 280px;
-    }
+  select {
+    min-width: 280px;
+  }
 }
 
 .block {
-    pointer-events: none;
-    opacity: .4;
-}
\ No newline at end of file
+  pointer-events: none;
+  opacity: .4;
+}
diff --git a/client/src/sass/ManageProjects.scss b/client/src/sass/ManageProjects.scss
index 46899a9dc..94480193b 100644
--- a/client/src/sass/ManageProjects.scss
+++ b/client/src/sass/ManageProjects.scss
@@ -218,7 +218,6 @@ div.editable-field {
   background-color: white;
 }
 
-// create new event form on createNewEvent.js
 .event-form-box {
   min-width: 100%;
   min-height: 540px;
@@ -227,25 +226,33 @@ div.editable-field {
   border: solid black 2px;
   display: flex;
   flex-direction: column;
+  gap: 20px;
   background-color: white;
+
+  // Temporary solution until Globally applied CSS is refactored/removed
+
+  // Resets the label text size on EventForm.tsx Text Fields
+  // A global variable was interacting with MUI styles and overflowing the label on <TextField> in EventForm.tsx
+  .MuiInputLabel-root {
+    font-size: inherit;
+  }
+
+  // Forces horizontal padding inside EventForm.tsx Text Fields
+  // A global variable was interacting with MUI styles and affecting padding inside <TextField> in EventForm.tsx
+  .MuiInputBase-input {
+    padding-left: 15px !important;
+    padding-right: 15px !important;
+  }
 }
 
-.event-form-box .event-form-title {
+.event-form-title {
   font-size: 20px;
-  margin-bottom: 16px;
 }
 
 .event-form-row {
   display: flex;
   flex-direction: row;
-}
-
-.event-form-label {
-  display: block;
-  margin-top: 4px;
-  select {
-    display: block;
-  }
+  gap: 16px;
 }
 
 .event-form-error {
@@ -253,39 +260,6 @@ div.editable-field {
   margin-bottom: 10px;
 }
 
-.event-form-box input,
-textarea {
-  display: block;
-  width: 100%;
-  padding: 2px 0 15px 10px;
-  margin: 5px 0;
-  border: 1px;
-  border-radius: 5px;
-  font-size: 20px;
-  color: black;
-}
-
-.event-form-box select {
-  color: black;
-  width: 140px;
-  padding: 6px;
-  font-size: 16px;
-  font-weight: bold;
-  border: 1px solid black;
-  border-radius: 0px;
-  margin: 12px;
-}
-
-.event-form-box textarea {
-  height: 25px;
-}
-
-.event-form-box label {
-  font-size: 15px;
-  width: 100%;
-  display: block;
-}
-
 .button-box {
   margin-top: 10px;
 }
@@ -312,7 +286,7 @@ textarea {
 }
 
 .event-list-details {
- display: flex;
+  display: flex;
 }
 
 .edit-icon {