diff --git a/client/src/components/presentational/newUserForm.jsx b/client/src/components/presentational/newUserForm.jsx
index 178be15fb..f0e9c193c 100644
--- a/client/src/components/presentational/newUserForm.jsx
+++ b/client/src/components/presentational/newUserForm.jsx
@@ -1,9 +1,18 @@
-import React, { useState } from 'react';
-import { FormControl, TextField } from '@mui/material';
+import { useState } from 'react';
+import {
+  Box,
+  Button,
+  FormControl,
+  FormControlLabel,
+  FormLabel,
+  Radio,
+  RadioGroup,
+  TextField,
+  Typography,
+} from '@mui/material';
 import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
-import { format } from 'date-fns';
 import '../../sass/CheckIn.scss';
 
 const NewUserForm = (props) => {
@@ -17,142 +26,187 @@ const NewUserForm = (props) => {
       console.error('Invalid date selected:', newValue);
     }
   };
+  // MUI InputLabelProps Style
+  const InputLabelProps = {
+    sx: {
+      backgroundColor: 'white',
+      px: 0, // padding left/right
+      width: '17em',
+      '&.Mui-focused': {
+        mt: 0.4, // only applies when the input is focused
+      },
+      '&.MuiInputLabel-shrink': {
+        mt: 0.4,
+      },
+    },
+  };
+  // MUI FormLabel Style
+  const FormLabelStyle = {
+    color: 'black',
+    fontWeight: 500,
+  };
 
   return (
     <LocalizationProvider dateAdapter={AdapterDateFns}>
-      <div className="check-in-container">
-        <div className="check-in-headers">
-          <h3>Welcome!</h3>
-          <h4>Tell us a little bit about yourself:</h4>
-        </div>
-        <div className="check-in-form">
-          <form
+      <Box className="check-in-container">
+        <Box className="check-in-headers">
+          <Typography variant="h3" fontSize="3em">
+            Welcome!
+          </Typography>
+          <Typography variant="h6">
+            Tell us a little bit about yourself:
+          </Typography>
+        </Box>
+        <Box className="check-in-form">
+          <Box
             className="form-check-in"
             autoComplete="off"
             onSubmit={(e) => e.preventDefault()}
           >
-            <div className="form-row">
-              <div className="form-input-text">
-                <input
-                  type="text"
-                  name="firstName"
-                  placeholder="First Name"
-                  value={props.firstName.toString()}
-                  onChange={props.handleFirstNameChange}
-                  aria-label="First Name"
-                  required
-                />
-              </div>
-            </div>
-            <div className="form-row">
-              <div className="form-input-text">
-                <input
-                  type="text"
-                  name="lastName"
-                  placeholder="Last Name"
-                  value={props.lastName.toString()}
-                  onChange={props.handleLastNameChange}
-                  aria-label="Last Name"
-                  required
-                />
-              </div>
-            </div>
-            <div className="form-row">
-              <div className="form-input-text">
-                <input
-                  type="email"
-                  name="email"
-                  placeholder="Email Address"
-                  value={props.formInput.email.toString().toLowerCase()}
-                  onChange={props.handleInputChange}
-                  aria-label="Email Address"
-                  required
-                />
-                <label htmlFor="email">
-                  {
-                    "(This allows easy use of the app. We'll never sell your data!)"
-                  }
-                </label>
-              </div>
-            </div>
+            <Box className="form-row">
+              <TextField
+                label="First Name"
+                variant="outlined"
+                InputLabelProps={{
+                  sx: {
+                    backgroundColor: 'white',
+                    px: 0,
+                    width: '6.3em',
+                    '&.Mui-focused': {
+                      mt: 0.4, // only applies when the input is focused
+                    },
+                    '&.MuiInputLabel-shrink': {
+                      mt: 0.4,
+                    },
+                  },
+                }}
+                name="firstName"
+                value={props.firstName.toString()}
+                onChange={props.handleFirstNameChange}
+                required
+              />
+            </Box>
+            <Box className="form-row">
+              <TextField
+                label="Last Name"
+                variant="outlined"
+                InputLabelProps={{
+                  sx: {
+                    backgroundColor: 'white',
+                    px: 0,
+                    width: '6.2em',
+                    '&.Mui-focused': {
+                      mt: 0.4, // only applies when the input is focused
+                    },
+                    '&.MuiInputLabel-shrink': {
+                      mt: 0.4,
+                    },
+                  },
+                }}
+                name="lastName"
+                value={props.lastName.toString()}
+                onChange={props.handleLastNameChange}
+                required
+              />
+            </Box>
+            <Box className="form-row">
+              <TextField
+                label="Email Address"
+                variant="outlined"
+                InputLabelProps={{
+                  sx: {
+                    backgroundColor: 'white',
+                    px: 0,
+                    width: '8em',
+                    '&.Mui-focused': {
+                      mt: 0.4, // only applies when the input is focused
+                    },
+                    '&.MuiInputLabel-shrink': {
+                      mt: 0.4,
+                    },
+                  },
+                }}
+                name="email"
+                value={props.formInput.email.toString().toLowerCase()}
+                onChange={props.handleInputChange}
+                helperText="(This allows easy use of the app. We'll never sell your data!)"
+                FormHelperTextProps={{
+                  sx: {
+                    marginBottom: '10px',
+                    color: 'black',
+                  },
+                }}
+                required
+              />
+            </Box>
 
             {props.questions.length !== 0 &&
-              props.questions.map((question) => {
-                return (
+              props.questions.map(
+                (question) =>
                   question.type === 'text' && (
-                    <div key={question._id} className="form-row">
-                      <div className="form-input-text">
-                        <input
-                          type="text"
-                          name={question.htmlName}
-                          placeholder={question.placeholderText}
-                          value={
-                            Object.keys(props.formInput).includes(
-                              question.htmlName
-                            )
-                              ? props.formInput[
-                                  question.htmlName.toString()
-                                ].toString()
-                              : ''
-                          }
-                          onChange={props.handleInputChange}
-                          required
-                        />
-                        <label htmlFor={question.htmlName}>
-                          {question.questionText}
-                        </label>
-                      </div>
-                    </div>
-                  )
-                );
-              })}
+                    <Box key={question._id} className="form-row">
+                      <TextField
+                        label={question.questionText}
+                        variant="outlined"
+                        InputLabelProps={InputLabelProps}
+                        name={question.htmlName}
+                        placeholder={question.placeholderText}
+                        value={
+                          Object.keys(props.formInput).includes(
+                            question.htmlName,
+                          )
+                            ? props.formInput[
+                                question.htmlName.toString()
+                              ].toString()
+                            : ''
+                        }
+                        onChange={props.handleInputChange}
+                        required
+                      />
+                    </Box>
+                  ),
+              )}
 
             {props.questions.length !== 0 &&
-              props.questions.map((question) => {
-                return (
+              props.questions.map(
+                (question) =>
                   question.type === 'select' && (
-                    <div key={question._id} className="form-row last-row">
-                      <div className="form-input-radio">
-                        <label htmlFor={question.htmlName}>
-                          IS THIS YOUR FIRST TIME ATTENDING A HACK FOR LA
-                          MEETING?
-                        </label>
-                        <div className="radio-buttons first-time-select">
-                          <input
-                            id="radio1"
-                            type="radio"
-                            name={question.htmlName}
-                            value={true}
-                            onChange={props.handleNewMemberChange}
-                            defaultChecked
-                            required
+                    <Box key={question._id} className="form-row last-row">
+                      <FormControl component="fieldset">
+                        <FormLabel component="legend" sx={FormLabelStyle}>
+                          {question.questionText}
+                        </FormLabel>
+                        <RadioGroup
+                          name={question.htmlName}
+                          defaultValue="true"
+                          onChange={props.handleNewMemberChange}
+                        >
+                          <FormControlLabel
+                            value="true"
+                            control={<Radio />}
+                            label="Yes"
                           />
-                          <label htmlFor="radio1">Yes</label>
-                          <input
-                            id="radio2"
-                            type="radio"
-                            name={question.htmlName}
-                            value={false}
-                            onChange={props.handleNewMemberChange}
+                          <FormControlLabel
+                            value="false"
+                            control={<Radio />}
+                            label="No"
                           />
-                          <label htmlFor="radio2">No</label>
-                        </div>
-                      </div>
-                    </div>
-                  )
-                );
-              })}
+                        </RadioGroup>
+                      </FormControl>
+                    </Box>
+                  ),
+              )}
             {props.newMember === true
               ? null
               : props.questions.length !== 0 &&
-                props.questions.map((question) => {
-                  return (
+                props.questions.map(
+                  (question) =>
                     question.htmlName === 'attendanceLength' && (
-                      <div key={question._id} className="form-row">
-                        <div className="form-input-text">
-                          <label htmlFor={question.htmlName}>
+                      <Box key={question._id} className="form-row">
+                        <FormControl component="fieldset">
+                          <FormLabel component="legend" sx={FormLabelStyle}>
                             {question.questionText}
-                          </label>
+                          </FormLabel>
                           <FormControl
                             sx={{
                               margin: '1rem 0',
@@ -176,13 +230,17 @@ const NewUserForm = (props) => {
                                 maxWidth: '300px',
                                 borderBottom: 'none',
                                 '& input[type=text]': {
-                                    height: '40px',
-                                    width: '100%',
-                                    borderBottom: 'none',
-                                    paddingLeft: '0.5rem',
-                                    color: 'rgb(250, 17, 79)',
-                                    fontWeight: '600', // semi-bold
-                                  },
+                                  height: '40px',
+                                  width: '100%',
+                                  borderBottom: 'none',
+                                  paddingLeft: '0.5rem',
+                                  color: 'rgb(250, 17, 79)',
+                                  fontWeight: '600', // semi-bold
+                                },
+                                label: {
+                                  backgroundColor: 'white',
+                                  width: '8em',
+                                },
                               }}
                             >
                               {(params) => (
@@ -190,45 +248,36 @@ const NewUserForm = (props) => {
                               )}
                             </DatePicker>
                           </FormControl>
-                        </div>
-                      </div>
-                    )
-                  );
-                })}
+                        </FormControl>
+                      </Box>
+                    ),
+                )}
 
             {props.isError && props.errorMessage.length > 1 && (
-              <div className="error">{props.errorMessage}</div>
+              <Typography className="error">{props.errorMessage}</Typography>
             )}
 
             {!props.isLoading ? (
-              <div className="form-row">
-                <div className="form-input-button">
-                  <button
-                    type="submit"
-                    className="form-check-in-submit"
-                    onClick={(e) => props.checkInNewUser(e, selectedDate)}
-                    disabled={!selectedDate}
-                  >
-                    {props.newMember ? 'CREATE PROFILE' : 'CHECK IN'}
-                  </button>
-                </div>
-              </div>
+              <Box className="form-row">
+                <Button
+                  variant="contained"
+                  color="primary"
+                  onClick={(e) => props.checkInNewUser(e, selectedDate)}
+                  disabled={!selectedDate}
+                >
+                  {props.newMember ? 'CREATE PROFILE' : 'CHECK IN'}
+                </Button>
+              </Box>
             ) : (
-              <div className="form-row">
-                <div className="form-input-button">
-                  <button
-                    type="submit"
-                    className="form-check-in-submit"
-                    onClick={(e) => e.preventDefault()}
-                  >
-                    CHECKING IN...
-                  </button>
-                </div>
-              </div>
+              <Box className="form-row">
+                <Button variant="contained" disabled>
+                  CHECKING IN...
+                </Button>
+              </Box>
             )}
-          </form>
-        </div>
-      </div>
+          </Box>
+        </Box>
+      </Box>
     </LocalizationProvider>
   );
 };