diff --git a/client/src/components/ChangesModal.jsx b/client/src/components/ChangesModal.jsx
index 5eff6315..275c4750 100644
--- a/client/src/components/ChangesModal.jsx
+++ b/client/src/components/ChangesModal.jsx
@@ -1,16 +1,8 @@
-import React from 'react'
-import { 
-    Modal,
-    Box,
-    Typography,
-    Grid
- } from '@mui/material'
- import { StyledButton } from './ProjectForm';
- import { Link } from 'react-router-dom';
- import WarningAmberRoundedIcon from '@mui/icons-material/WarningAmberRounded';
+import { Modal, Box, Typography, Grid, Button } from '@mui/material';
+import { Link } from 'react-router-dom';
+import WarningAmberRoundedIcon from '@mui/icons-material/WarningAmberRounded';
 
-
- const style = {
+const style = {
   position: 'absolute',
   top: '50%',
   left: '50%',
@@ -22,52 +14,73 @@ import {
   p: 4,
 };
 
+export default function ChangesModal({
+  open,
+  onClose,
+  handleClose,
+  destination,
+}) {
+  return (
+    <Modal
+      open={open}
+      onClose={onClose}
+      aria-labelledby="modal-modal-title"
+      aria-describedby="modal-modal-description"
+    >
+      <Box sx={style}>
+        <Typography
+          sx={{ textAlign: 'center' }}
+          id="modal-modal-title"
+          variant="h4"
+          component="h3"
+        >
+          <WarningAmberRoundedIcon fontSize="large" color="error" />
+        </Typography>
 
- export default function ChangesModal({open, onClose, handleClose, destination }) {
-    return (
-      
-      <Modal
-        open={open}
-        onClose={onClose}
-        aria-labelledby="modal-modal-title"
-        aria-describedby="modal-modal-description"
-      >
-        <Box sx={style}>
-          <Typography sx={{textAlign: 'center'}} id="modal-modal-title" variant="h4" component="h3">
-           <WarningAmberRoundedIcon fontSize="large" color="error" />
-         </Typography>
-
-          <Typography sx={{textAlign: 'center'}} id="modal-modal-title" variant="h4" component="h4">
-           Wait! You made some changes.
-          </Typography>
-          <Typography id="modal-modal-description" sx={{ mt: 2, textAlign: 'center' }}>
-            Are you sure you want to exit without saving?
-          </Typography>
-            <Grid direction="column" spacing={3} container alignContent="center" sx={{ my: 3 }}>
-            <Grid item xs="auto">
-              <StyledButton
-                component={Link}
-                to={destination}
-                variant="secondary"
-                cursor="pointer"
-                
-              >
-                Yes
-              </StyledButton>
-            </Grid>
-            <Grid item xs="auto">
-              <StyledButton
-                type="submit"
-                form="project-form"
-                cursor="pointer"
-                variant="contained"
-                onClick={handleClose}
-              >
-                No
-              </StyledButton>
-            </Grid>
+        <Typography
+          sx={{ textAlign: 'center' }}
+          id="modal-modal-title"
+          variant="h4"
+          component="h4"
+        >
+          Wait! You made some changes.
+        </Typography>
+        <Typography
+          id="modal-modal-description"
+          sx={{ mt: 2, textAlign: 'center' }}
+        >
+          Are you sure you want to exit without saving?
+        </Typography>
+        <Grid
+          direction="column"
+          spacing={3}
+          container
+          alignContent="center"
+          sx={{ my: 3 }}
+        >
+          <Grid item xs="auto">
+            <Button
+              component={Link}
+              to={destination}
+              variant="secondary"
+              style={{ width: '150px', cursor: 'pointer' }}
+            >
+              Yes
+            </Button>
+          </Grid>
+          <Grid item xs="auto">
+            <Button
+              type="submit"
+              form="project-form"
+              style={{ width: '150px', cursor: 'pointer' }}
+              variant="contained"
+              onClick={handleClose}
+            >
+              No
+            </Button>
           </Grid>
-        </Box>
-      </Modal>
-    )
- }
\ No newline at end of file
+        </Grid>
+      </Box>
+    </Modal>
+  );
+}
diff --git a/client/src/components/ProjectForm.jsx b/client/src/components/ProjectForm.jsx
index b21e8b4e..eff754a4 100644
--- a/client/src/components/ProjectForm.jsx
+++ b/client/src/components/ProjectForm.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import { useForm, useFormState } from 'react-hook-form';
 import {
@@ -12,7 +12,6 @@ import {
   FormControlLabel,
   RadioGroup,
 } from '@mui/material';
-import { styled } from '@mui/material/styles';
 
 import useAuth from '../hooks/useAuth';
 import ProjectApiService from '../api/ProjectApiService';
@@ -28,22 +27,6 @@ import ChangesModal from './ChangesModal';
  *  -the rest are inline
  */
 
-export const StyledButton = styled(Button)(({ theme }) => ({
-  width: '150px',
-}));
-
-const StyledFormControlLabel = styled(FormControlLabel)(({ theme }) => ({
-  width: 'max-content',
-  '& .MuiFormControlLabel-label': {
-    fontSize: '14px',
-  },
-}));
-
-const StyledRadio = styled(Radio)(({ theme }) => ({
-  padding: '0px 0px 0px 0px',
-  marginRight: '.5rem',
-}));
-
 /**Project Form Component
  * -renders a form for creating and updating a project
 
@@ -145,11 +128,12 @@ export default function ProjectForm({
 
   // Handles the location radio button change.
   const handleRadioChange = (event) => {
+    alert(event.target.value);
     setLocationType(event.target.value);
   };
 
   // Toggles the project view to edit mode change.
-  const handleEditMode = (event) => {
+  const handleEditMode = () => {
     setEditMode(!editMode);
     // React hook form method to reset data back to original values. Triggered when Edit Mode is cancelled.
     reset({
@@ -211,16 +195,16 @@ export default function ProjectForm({
           onChange={handleRadioChange}
           sx={{ mb: 0.5 }}
         >
-          <StyledFormControlLabel
+          <FormControlLabel
             value="remote"
-            control={<StyledRadio size="small" />}
+            control={<Radio size="small" />}
             label="Remote"
             disabled={isEdit ? !editMode : false}
           />
           <Box sx={{ width: '10px' }} />
-          <StyledFormControlLabel
+          <FormControlLabel
             value="in-person"
-            control={<StyledRadio size="small" />}
+            control={<Radio size="small" />}
             label="In-Person"
             disabled={isEdit ? !editMode : false}
           />
@@ -242,7 +226,8 @@ export default function ProjectForm({
           badge={isEdit ? editIcon() : addIcon()}
           expandable={true}
         >
-          <form
+          <Box
+            component="form"
             id="project-form"
             onSubmit={handleSubmit((data) => {
               isEdit ? submitEditProject(data) : submitNewProject(data);
@@ -268,25 +253,31 @@ export default function ProjectForm({
               aria-describedby="modal-modal-description"
               handleClose={handleClose}
             />
-          </form>{' '}
+          </Box>{' '}
           <Grid container justifyContent="space-evenly" sx={{ my: 3 }}>
             <Grid item xs="auto">
-              <StyledButton
+              <Button
                 type="submit"
                 form="project-form"
                 variant={
                   !isEdit ? 'secondary' : !editMode ? 'contained' : 'secondary'
                 }
-                cursor="pointer"
+                sx={{
+                  width: '150px',
+                  cursor: 'pointer',
+                }}
                 disabled={isEdit && isLoading ? !editMode : false}
               >
                 {isLoading ? <CircularProgress /> : 'Save'}
-              </StyledButton>
+              </Button>
             </Grid>
             <Grid item xs="auto">
-              <StyledButton
+              <Button
                 variant="contained"
-                cursor="pointer"
+                sx={{
+                  width: '150px',
+                  cursor: 'pointer',
+                }}
                 onClick={
                   !editMode || Object.keys(dirtyFields).length === 0
                     ? checkFields
@@ -294,14 +285,17 @@ export default function ProjectForm({
                 }
               >
                 Close
-              </StyledButton>
+              </Button>
             </Grid>
           </Grid>
         </TitledBox>
       ) : (
-        <TitledBox title={'Project Information'} expandable={true}>
-          {' '}
-          <form
+        <TitledBox title={'Project Information'}>
+          <Typography sx={{ p: 1, fontSize: '14px', fontWeight: '600' }}>
+            Project Information
+          </Typography>{' '}
+          <Box
+            component="form"
             id="project-form"
             onSubmit={handleSubmit((data) => {
               isEdit ? submitEditProject(data) : submitNewProject(data);
@@ -327,7 +321,7 @@ export default function ProjectForm({
               aria-describedby="modal-modal-description"
               handleClose={handleClose}
             />
-          </form>
+          </Box>
           {''}
         </TitledBox>
       )}