diff --git a/client/src/components/presentational/newUserForm.js b/client/src/components/presentational/newUserForm.js
index 56612696..47a07bca 100644
--- a/client/src/components/presentational/newUserForm.js
+++ b/client/src/components/presentational/newUserForm.js
@@ -1,202 +1,161 @@
-import React from "react";
+import React from 'react';
+import { TextField, Button, Radio, RadioGroup, FormControlLabel, FormControl, FormLabel, Typography, Box } from '@mui/material';
 
 const NewUserForm = (props) => {
   return (
-    <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">
+    <Box className="check-in-container">
+      <Box className="check-in-headers">
+        <Typography variant="h3">Welcome!</Typography>
+        <Typography variant="h4">Tell us a little bit about yourself:</Typography>
+      </Box>
+      <Box className="check-in-form">
         <form
           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()}
-                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"
+              name="firstName"
+              value={props.firstName.toString()}
+              onChange={props.handleFirstNameChange}
+              required
+            />
+          </Box>
+          <Box className="form-row">
+            <TextField
+              label="Last Name"
+              variant="outlined"
+              name="lastName"
+              value={props.lastName.toString()}
+              onChange={props.handleLastNameChange}
+              required
+            />
+          </Box>
+          <Box className="form-row">
+            <TextField
+              label="Email Address"
+              variant="outlined"
+              type="email"
+              name="email"
+              value={props.formInput.email.toString()}
+              onChange={props.handleInputChange}
+              helperText="This allows easy use of the app. We'll never sell your data!"
+              required
+            />
+          </Box>
 
           {props.questions.length !== 0 &&
-            props.questions.map((question) => {
-              return (
-                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>
-                )
-              );
-            })}
+            props.questions.map((question) => (
+              question.type === "text" && (
+                <Box key={question._id} className="form-row">
+                  <TextField
+                    label={question.questionText}
+                    variant="outlined"
+                    name={question.htmlName}
+                    placeholder={question.placeholderText}
+                    value={
+                      Object.keys(props.formInput).includes(question.htmlName)
+                        ? props.formInput[question.htmlName].toString()
+                        : ""
+                    }
+                    onChange={props.handleInputChange}
+                    required
+                  />
+                </Box>
+              )
+            ))}
 
           {props.questions.length !== 0 &&
-            props.questions.map((question) => {
-              return (
-                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 Night?
-                      </label>
-                      <div className="radio-buttons first-time-select">
-                        <input
-                          id="radio1"
-                          type="radio"
-                          name={question.htmlName}
-                          value={true}
-                          onChange={props.handleNewMemberChange}
-                          defaultChecked
-                          required
-                        />
-                        <label htmlFor="radio1">Yes</label>
-                        <input
-                          id="radio2"
-                          type="radio"
-                          name={question.htmlName}
-                          value={false}
-                          onChange={props.handleNewMemberChange}
-                        />
-                        <label htmlFor="radio2">No</label>
-                      </div>
-                    </div>
-                  </div>
-                )
-              );
-            })}
+            props.questions.map((question) => (
+              question.type === "select" && (
+                <Box key={question._id} className="form-row last-row">
+                  <FormControl component="fieldset">
+                    <FormLabel component="legend">{question.questionText}</FormLabel>
+                    <RadioGroup
+                      name={question.htmlName}
+                      defaultValue="true"
+                      onChange={props.handleNewMemberChange}
+                    >
+                      <FormControlLabel value="true" control={<Radio />} label="Yes" />
+                      <FormControlLabel value="false" control={<Radio />} label="No" />
+                    </RadioGroup>
+                  </FormControl>
+                </Box>
+              )
+            ))}
 
           {props.newMember === true
             ? null
             : props.questions.length !== 0 &&
-              props.questions.map((question) => {
-                return (
-                  question.htmlName === "attendanceLength" && (
-                    <div key={question._id} className="form-row">
-                      <div className="form-input-text">
-                        <label htmlFor={question.htmlName}>
-                          {question.questionText}
-                        </label>
-                        <div className="radio-buttons">
+              props.questions.map((question) => (
+                question.htmlName === "attendanceLength" && (
+                  <Box key={question._id} className="form-row">
+                    <FormControl component="fieldset">
+                      <FormLabel component="legend">{question.questionText}</FormLabel>
+                      <FormControlLabel
+                        control={
                           <select
                             name={question.htmlName}
                             value={props.month}
                             onChange={props.handleMonthChange}
                             required
                           >
-                            {props.months.map((month, index) => {
-                              return (
-                                <option key={index} value={month}>
-                                  {month}
-                                </option>
-                              );
-                            })}
+                            {props.months.map((month, index) => (
+                              <option key={index} value={month}>{month}</option>
+                            ))}
                           </select>
+                        }
+                      />
+                      <FormControlLabel
+                        control={
                           <select
                             name={question.htmlName}
                             value={props.year}
                             onChange={props.handleYearChange}
                             required
                           >
-                            {props.years.map((year, index) => {
-                              return (
-                                <option key={index} value={year}>
-                                  {year}
-                                </option>
-                              );
-                            })}
+                            {props.years.map((year, index) => (
+                              <option key={index} value={year}>{year}</option>
+                            ))}
                           </select>
-                        </div>
-                      </div>
-                    </div>
-                  )
-                );
-              })}
+                        }
+                      />
+                    </FormControl>
+                  </Box>
+                )
+              ))}
 
           {props.isError && props.errorMessage.length > 1 &&
-            <div className="error">{props.errorMessage}</div>
+            <Typography color="error" 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)}
-                >
-                  {props.newMember ? 'CREATE PROFILE' : 'CHECK IN'}
-                </button>
-              </div>
-            </div>
+            <Box className="form-row">
+              <Button
+                variant="contained"
+                color="primary"
+                onClick={(e) => props.checkInNewUser(e)}
+              >
+                {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>
   );
 };
+
 export default NewUserForm;