diff --git a/client/src/components/presentational/profile/UserTable.jsx b/client/src/components/presentational/profile/UserTable.jsx
index ed18d02de..aa8913653 100644
--- a/client/src/components/presentational/profile/UserTable.jsx
+++ b/client/src/components/presentational/profile/UserTable.jsx
@@ -1,59 +1,98 @@
 import React from 'react';
 import ProfileOption from '../profile/ProfileOption';
 
+import {
+  Box,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+} from '@mui/material';
+
 const UserTable = ({ context }) => {
-    const { user, removeOption } = context;
-
-    return (
-        <div className="user-info">
-            <table className="user-data">
-                <tbody>
-                    <tr>
-                        <th className="user-data__header">Name</th>
-                        <td className="user-data__info user-data">{user.name}</td>
-                    </tr>
-                    <tr>
-                        <th className="user-data__header">Email</th>
-                        <td className="user-data__info">{user.email}</td>
-                    </tr>
-                    <tr>
-                        <th className="user-data__header">Github</th>
-                        <td className="user-data__info">{user.github}</td>
-                    </tr>     
-
-                    {user.slack ?    
-                    (<tr>
-                        <th className="user-data__header">Slack</th>
-                        <td className="user-data__info">{user.slack}</td>
-                    </tr>):("")}
-
-                    {user.desiredRoles ? 
-                    (<tr>
-                        <th className="user-data__header">Desired Roles</th>
-                        <td className="user-data__info user-data__info--flex">
-                            {user.desiredRoles.map((option, index)=> (<ProfileOption key={index} option={option} removeOption={()=>removeOption("desiredRoles", option)}/>))}
-                        </td>
-                    </tr>):("")}
-
-                    {user.hackNights ? 
-                        (<tr>
-                            <th className="user-data__header">My Hack Nights</th>
-                            <td className="user-data__info user-data__info--flex">
-                                {user.hackNights.map((option, index)=>(<ProfileOption key={index} option={option} removeOption={()=>removeOption("hackNights", option)}/>))}
-                            </td>
-                        </tr>):("")}
-                        
-                    {user.availability ? 
-                        (<tr>
-                            <th className="user-data__header">Availability</th>
-                            <td className="user-data__info user-data__info--flex">
-                                {user.availability.map((option, index)=>(<ProfileOption key={index} option={option} removeOption={()=>removeOption("availability", option)}/>))}
-                            </td>
-                        </tr>):("")}
-                </tbody>
-            </table>
-        </div>
-    )
-}
-
-export default UserTable;
\ No newline at end of file
+  const { user, removeOption } = context;
+
+  return (
+    <Box className="user-info">
+      <Table className="user-data">
+        <TableBody>
+          <TableRow>
+            <TableHead className="user-data__header">Name</TableHead>
+            <TableCell className="user-data__info user-data">{user.name}</TableCell>
+          </TableRow>
+          <TableRow>
+            <TableHead className="user-data__header">Email</TableHead>
+            <TableCell className="user-data__info">{user.email}</TableCell>
+          </TableRow>
+          <TableRow>
+            <TableHead className="user-data__header">Github</TableHead>
+            <TableCell className="user-data__info">{user.github}</TableCell>
+          </TableRow>
+
+          {user.slack ? (
+            <TableRow>
+              <TableHead className="user-data__header">Slack</TableHead>
+              <TableCell className="user-data__info">{user.slack}</TableCell>
+            </TableRow>
+          ) : (
+            ''
+          )}
+
+          {user.desiredRoles ? (
+            <TableRow>
+              <TableHead className="user-data__header">Desired Roles</TableHead>
+              <TableCell className="user-data__info user-data__info--flex">
+                {user.desiredRoles.map((option, index) => (
+                  <ProfileOption
+                    key={index}
+                    option={option}
+                    removeOption={() => removeOption('desiredRoles', option)}
+                  />
+                ))}
+              </TableCell>
+            </TableRow>
+          ) : (
+            ''
+          )}
+
+          {user.hackNights ? (
+            <TableRow>
+              <TableHead className="user-data__header">My Hack Nights</TableHead>
+              <TableCell className="user-data__info user-data__info--flex">
+                {user.hackNights.map((option, index) => (
+                  <ProfileOption
+                    key={index}
+                    option={option}
+                    removeOption={() => removeOption('hackNights', option)}
+                  />
+                ))}
+              </TableCell>
+            </TableRow>
+          ) : (
+            ''
+          )}
+
+          {user.availability ? (
+            <TableRow>
+              <TableHead className="user-data__header">Availability</TableHead>
+              <TableCell className="user-data__info user-data__info--flex">
+                {user.availability.map((option, index) => (
+                  <ProfileOption
+                    key={index}
+                    option={option}
+                    removeOption={() => removeOption('availability', option)}
+                  />
+                ))}
+              </TableCell>
+            </TableRow>
+          ) : (
+            ''
+          )}
+        </TableBody>
+      </Table>
+    </Box>
+  );
+};
+
+export default UserTable;