diff --git a/client/src/components/user-admin/EditUsers.jsx b/client/src/components/user-admin/EditUsers.jsx
index 894a3628c..825ee23dd 100644
--- a/client/src/components/user-admin/EditUsers.jsx
+++ b/client/src/components/user-admin/EditUsers.jsx
@@ -1,56 +1,79 @@
 import React, { useEffect, useState } from 'react';
+import {
+  Grid,
+  FormGroup,
+  FormControlLabel,
+  Switch,
+  Button,
+  Typography,
+  Container,
+  List,
+  ListItem,
+  ListItemText,
+  Select,
+  MenuItem,
+  FormControl,
+  InputLabel,
+} from '@mui/material';
 import '../../sass/UserAdmin.scss';
-import { FormGroup, FormControlLabel, Switch } from '@mui/material';
 
 // child of UserAdmin. Displays form to update users.
-const EditUsers = ({ userToEdit, backToSearch, updateUserDb, projects, updateUserActiveStatus, updateUserAccessLevel }) => {
+const EditUsers = ({
+  userToEdit,
+  backToSearch,
+  updateUserDb,
+  projects,
+  updateUserActiveStatus,
+  updateUserAccessLevel,
+}) => {
   const [userManagedProjects, setUserManagedProjects] = useState([]); //  The projects that the selected user is assigned
   const [projectValue, setProjectValue] = useState(''); // State and handler for form in EditUsers
   const [isActive, setIsActive] = useState(userToEdit.isActive);
-  const [isAdmin, setIsAdmin] = useState(userToEdit.accessLevel === "admin");
+  const [isAdmin, setIsAdmin] = useState(userToEdit.accessLevel === 'admin');
 
   // Boolean to check if the current user is the super admin
-  const isSuperAdmin = userToEdit.accessLevel === "superadmin";
+  const isSuperAdmin = userToEdit.accessLevel === 'superadmin';
 
-  // Prepare data for display
   const userName = `${userToEdit.name?.firstName} ${userToEdit.name?.lastName}`;
   const userEmail = userToEdit.email;
   const userProjects = userManagedProjects || [];
 
-  // Filter active projects for dropdown
   const activeProjects = Object.values(projects)
     .filter((project) => project.projectStatus === 'Active')
     .sort((a, b) => a.name?.localeCompare(b.name))
     .map((p) => [p._id, p.name]);
 
-  // add user projects to state
   useEffect(() => {
     setUserManagedProjects(userToEdit.managedProjects);
   }, [userToEdit]);
 
-  // Prepare user projects for display by connecting the ID with the project name
   const userProjectsToDisplay = activeProjects.filter((item) =>
     userProjects.includes(item[0])
   );
 
-  // Handle the add project form submit
   const onSubmit = (event) => {
     event.preventDefault();
 
-    if (!isSuperAdmin && projectValue.length > 0 && projectValue !== 'default' && !userManagedProjects.includes(projectValue)) {
+    if (
+      !isSuperAdmin &&
+      projectValue.length > 0 &&
+      projectValue !== 'default' &&
+      !userManagedProjects.includes(projectValue)
+    ) {
       const newProjects = [...userManagedProjects, projectValue];
       updateUserDb(userToEdit, newProjects);
       setUserManagedProjects(newProjects);
-      setProjectValue([]);
+      setProjectValue('');
     } else {
-      setProjectValue([]);
+      setProjectValue('');
     }
   };
 
-  // Remove projects from db
   const handleRemoveProject = (projectToRemove) => {
     if (!isSuperAdmin && userManagedProjects.length > 0) {
-      const newProjects = userManagedProjects.filter((p) => p !== projectToRemove);
+      const newProjects = userManagedProjects.filter(
+        (p) => p !== projectToRemove
+      );
       updateUserDb(userToEdit, newProjects);
       setUserManagedProjects(newProjects);
     }
@@ -65,102 +88,105 @@ const EditUsers = ({ userToEdit, backToSearch, updateUserDb, projects, updateUse
 
   const handleSetAccessLevel = () => {
     if (!isSuperAdmin) {
-      const newAccessLevel = isAdmin ? "user" : "admin";
+      const newAccessLevel = isAdmin ? 'user' : 'admin';
       setIsAdmin(!isAdmin);
       updateUserAccessLevel(userToEdit, newAccessLevel);
     }
   };
 
   return (
-    <div className="edit-users">
-      <div className="ua-row">
-        <div className="user-display-column-left">Name:</div>
-        <div className="user-display-column-right">{userName}</div>
-      </div>
-      <div className="ua-row">
-        <div className="user-display-column-left">Email:</div>
-        <div className="user-display-column-right">{userEmail}</div>
-      </div>
-      <div className="ua-row toggle-flex">
-        <div className="user-toggle-column-left">Is Active:</div>
-        <div className="toggle-flex">
-          <span className="toggle-status">{isActive.toString()}</span>
-          <FormGroup>
-            <FormControlLabel 
-              disabled={isSuperAdmin} 
-              control={<Switch checked={isActive} />} 
-              onClick={handleSetIsActive} 
+    <Container className="edit-users">
+      <Typography variant="body1">Name: {userName}</Typography>
+      <Typography variant="body1">Email: {userEmail}</Typography>
+      <FormGroup row alignItems="center">
+        <Typography variant="body1" sx={{ marginTop: 1 }}>
+          Is Active:
+        </Typography>
+        <FormControlLabel
+          sx={{ marginLeft: 1 }}
+          control={
+            <Switch
+              checked={isActive}
+              onChange={handleSetIsActive}
+              disabled={isSuperAdmin}
             />
-          </FormGroup>
-        </div>
-      </div>
-      <div className="ua-row toggle-flex">
-        <div className="user-toggle-column-left">VRMS Admin:</div>
-        <div className="toggle-flex">
-          <span className="toggle-status">{isAdmin || isSuperAdmin ? "Yes" : "No"}</span>
-          <FormGroup>
-            <FormControlLabel 
-              disabled={isSuperAdmin} 
-              control={<Switch checked={isAdmin || isSuperAdmin} />} 
-              onClick={handleSetAccessLevel} 
+          }
+          label={isActive.toString()}
+        />
+      </FormGroup>
+      <FormGroup row alignItems="center">
+        <Typography variant="body1" sx={{ marginTop: 1 }}>
+          VRMS Admin:
+        </Typography>
+        <FormControlLabel
+          sx={{ marginLeft: 1 }}
+          control={
+            <Switch
+              checked={isAdmin || isSuperAdmin}
+              onChange={handleSetAccessLevel}
+              disabled={isSuperAdmin}
             />
-          </FormGroup>
-        </div>
-      </div>
-      <div className="ua-row">
-        <div className="user-display-column-left">Projects:</div>
-        <div className="user-display-column-right">
-          <ul className="project-list">
-            {userProjectsToDisplay.map((result) => {
-              return (
-                <li key={`remove_${result[0]}`}>
-                  {result[1]}
-                  <button
-                    type="button"
-                    className="button-remove"
-                    disabled={isSuperAdmin}
-                    onClick={() => handleRemoveProject(result[0])}
-                  >
-                    (remove)
-                  </button>
-                </li>
-              );
-            })}
-          </ul>
-        </div>
-      </div>
-      <div>
-        <form onSubmit={onSubmit}>
-          <select
-            className="project-select"
-            value={projectValue}
-            onChange={(event) => {
-              setProjectValue(event.target.value);
-            }}
-            disabled={isSuperAdmin}
-          >
-            <option value="default">Select a project..</option>
-            {activeProjects.map((result) => {
-              return (
-                <option key={`select_${result[0]}`} value={result[0]}>
-                  {result[1]}
-                </option>
-              );
-            })}
-          </select>
-          <button className={`button-add ${isSuperAdmin ? 'button-add-disabled' : ''}`}
-            type="submit"
-            disabled={isSuperAdmin}>
-            Add project
-          </button>
-        </form>
-        <div>
-          <button type="button" className="button-back" onClick={backToSearch}>
-            Back to search  
-          </button>
-        </div>
-      </div>
-    </div>
+          }
+          label={isAdmin || isSuperAdmin ? 'Yes' : 'No'}
+        />
+      </FormGroup>
+      <Typography variant="body1">Projects:</Typography>
+      <List>
+        {userProjectsToDisplay.map((result) => (
+          <ListItem key={`remove_${result[0]}`} divider>
+            <Grid container alignItems="center">
+              <Grid item xs={9}>
+                <ListItemText primary={result[1]} />
+              </Grid>
+              <Grid item xs={3}>
+                <Button
+                  variant="text"
+                  color="error"
+                  onClick={() => handleRemoveProject(result[0])}
+                  fullWidth
+                  disabled={isSuperAdmin}
+                >
+                  (Remove)
+                </Button>
+              </Grid>
+            </Grid>
+          </ListItem>
+        ))}
+      </List>
+      <FormControl fullWidth>
+        <InputLabel id="project-select-label">Select a project</InputLabel>
+        <Select
+          labelId="project-select-label"
+          id="project-select"
+          value={projectValue}
+          label="Select a project"
+          onChange={(event) => setProjectValue(event.target.value)}
+          disabled={isSuperAdmin}
+        >
+          <MenuItem value="default">Select a project..</MenuItem>
+          {activeProjects.map((result) => (
+            <MenuItem key={`select_${result[0]}`} value={result[0]}>
+              {result[1]}
+            </MenuItem>
+          ))}
+        </Select>
+        <Button
+          variant="contained"
+          onClick={onSubmit}
+          style={{ marginTop: '1rem' }}
+          disabled={isSuperAdmin}
+        >
+          Add project
+        </Button>
+      </FormControl>
+      <Button
+        variant="outlined"
+        onClick={backToSearch}
+        style={{ marginTop: '1rem' }}
+      >
+        Back to search
+      </Button>
+    </Container>
   );
 };