diff --git a/client/src/components/user-admin/EditUsers.js b/client/src/components/user-admin/EditUsers.js
index 1e5f72e93..181b85910 100644
--- a/client/src/components/user-admin/EditUsers.js
+++ b/client/src/components/user-admin/EditUsers.js
@@ -1,138 +1,107 @@
 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 }) => {
-  const [userManagedProjects, setUserManagedProjects] = useState([]); //  The projects that the selected user is assigned
-  const [projectValue, setProjectValue] = useState(''); // State and handler for form in EditUsers
+  const [userManagedProjects, setUserManagedProjects] = useState([]);
+  const [projectValue, setProjectValue] = useState('');
   const [isActive, setIsActive] = useState(userToEdit.isActive);
 
-  // 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))
-    // eslint-disable-next-line no-underscore-dangle
     .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 (
-      projectValue.length > 0 &&
-      projectValue !== 'default' &&
-      !userManagedProjects.includes(projectValue)
-    ) {
+    if (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 (userManagedProjects.length > 0) {
-      const newProjects = userManagedProjects.filter(
-        (p) => p !== projectToRemove
-      );
-      updateUserDb(userToEdit, newProjects);
-      setUserManagedProjects(newProjects);
-    }
+    const newProjects = userManagedProjects.filter((p) => p !== projectToRemove);
+    updateUserDb(userToEdit, newProjects);
+    setUserManagedProjects(newProjects);
   };
 
   const handleSetIsActive = () => {
-    setIsActive(!isActive)
-    updateUserActiveStatus(userToEdit, !isActive)
-  }
+    setIsActive(!isActive);
+    updateUserActiveStatus(userToEdit, !isActive);
+  };
 
   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 is-active-flex">
-        <div className="user-is-active-column-left">Is Active:</div>
-        <div className="is-active-flex">
-          <span className="active-status">{isActive.toString()}</span>
-          <FormGroup>
-            <FormControlLabel control={<Switch checked={isActive} />} onClick={() => handleSetIsActive()} />
-          </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"
-                    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);
-            }}
-          >
-            <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" type="submit">
-            Add project
-          </button>
-        </form>
-        <div>
-          <button type="button" className="button-back" onClick={backToSearch}>
-            Back to search
-          </button>
-        </div>
-      </div>
-    </div>
+    <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} />} 
+        label={isActive.toString()}/>
+      </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
+                >
+                  (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)}
+        >
+          <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' }}>
+          Add project
+        </Button>
+      </FormControl>
+      <Button variant="outlined" onClick={backToSearch} style={{ marginTop: '1rem' }}>
+        Back to search
+      </Button>
+    </Container>
   );
 };