diff --git a/client/src/components/presentational/returnUserForm.js b/client/src/components/presentational/returnUserForm.js
index bde52931..7b410d11 100644
--- a/client/src/components/presentational/returnUserForm.js
+++ b/client/src/components/presentational/returnUserForm.js
@@ -1,19 +1,20 @@
 import React from 'react';
+import { Box, Container, CircularProgress, FormControl, Typography } from '@mui/material';
 
 const ReturnUserForm = (props) => {
   return (
-    <div className="check-in-container">
-      <div className="check-in-headers">
-        <h3>Welcome back!</h3>
-      </div>
-      <div className="check-in-form">
+    <Container className="check-in-container">
+      <Box className="check-in-headers">
+        <Typography variant='h3'>Welcome back!</Typography>
+      </Box>
+      <Box className="check-in-form">
         <form
           className="form-check-in"
           autoComplete="on"
           onSubmit={(e) => e.preventDefault()}
         >
-          <div className="form-row">
-            <div className="form-input-text">
+          <Box className="form-row">
+            <Box className="form-input-text">
               <label htmlFor="email">
                 Which email address did you use to check-in last time?
               </label>
@@ -27,22 +28,22 @@ const ReturnUserForm = (props) => {
                 required
                 autoComplete="email"
               />
-            </div>
-            <p>
+            </Box>
+            <Typography>
               {"(This allows easy use of the app. We'll never sell your data!)"}
-            </p>
-          </div>
+            </Typography>
+          </Box>
 
           {props.isError && props.errorMessage.length > 1 &&
-            <div className="error">{props.errorMessage}</div>
+            <Box className="error">{props.errorMessage}</Box>
           }
           {props.user === false && (
-            <div className="error">Try entering your email again.</div>
+            <Box className="error">Try entering your email again.</Box>
           )}
 
           {!props.user && !props.isLoading ? (
-            <div className="form-row">
-              <div className="form-input-button">
+            <Box className="form-row">
+              <Box className="form-input-button">
                 <button
                   type="submit"
                   className="form-check-in-submit"
@@ -53,11 +54,11 @@ const ReturnUserForm = (props) => {
                 >
                   CHECK IN
                 </button>
-              </div>
-            </div>
+              </Box>
+            </Box>
           ) : (
-            <div className="form-row">
-              <div className="form-input-button">
+            <Box className="form-row">
+              <Box className="form-input-button">
                 <button
                   type="submit"
                   className="form-check-in-submit block"
@@ -65,12 +66,12 @@ const ReturnUserForm = (props) => {
                 >
                   CHECKING IN...
                 </button>
-              </div>
-            </div>
+              </Box>
+            </Box>
           )}
         </form>
-      </div>
-    </div>
+      </Box>
+    </Container>
   );
 };
 export default ReturnUserForm;