diff --git a/client/src/pages/lab_management/users/AccessCheckCard.tsx b/client/src/pages/lab_management/users/AccessCheckCard.tsx
index 460fd659..c55a3064 100644
--- a/client/src/pages/lab_management/users/AccessCheckCard.tsx
+++ b/client/src/pages/lab_management/users/AccessCheckCard.tsx
@@ -1,9 +1,11 @@
-import { Button, Card, CardActions  } from "@mui/material";
+import { Button, Card, CardActions, Stack } from "@mui/material";
 import { gql } from "@apollo/client";
 import { useMutation } from "@apollo/client/react";
 import AuditLogEntity from "../audit_logs/AuditLogEntity";
-import { GET_USER } from "../../../queries/userQueries";
+import { AccessCheckExtraInfo, GET_USER } from "../../../queries/userQueries";
 import { useIsMobile } from "../../../common/IsMobileProvider";
+import CheckIcon from '@mui/icons-material/Check';
+import CloseIcon from '@mui/icons-material/Close';
 
 const APPROVE_CHECK = gql`
   mutation ApproveAccessCheck($id: ID!) {
@@ -43,18 +45,25 @@ export default function AccessCheckCard({ accessCheck, userID }: AccessCheckCard
   return (
     <Card
       sx={{
-        backgroundColor: !approved ? (localStorage.getItem("themeMode") === "dark" ? "grey.900" : "grey.100") : (localStorage.getItem("themeMode") === "dark" ? "lightGreen.800" : "lightGreen.100"),
-        border: `2px solid ${!approved ? "lightgrey" : "palegreen"}`,
         display: 'flex',
         flexDirection: 'row',
         justifyContent: 'space-between',
         flexWrap: isMobile ? 'wrap' : 'nowrap',
         alignItems: 'center',
+        padding: "5px"
       }}
+      variant={approved ? undefined : "outlined"}
     >
-      <div style={{ width: isMobile ? "100%" : "40%", marginLeft: "10px" }}>
-        <AuditLogEntity entityCode={"equipment:" + accessCheck.equipment.id + ":" + ((accessCheck.equipment !== undefined) ? accessCheck.equipment.name : "Loading...")}></AuditLogEntity>
-      </div>
+      <Stack sx={{ paddingLeft: "10px" }} direction={"row"} spacing={1} alignItems={"center"}>
+        {
+          approved
+            ? <CheckIcon color="success" />
+            : <CloseIcon color="error" />
+        }
+        <AuditLogEntity
+          entityCode={"equipment:" + accessCheck.equipment.id + ":" + ((accessCheck.equipment !== undefined) ? accessCheck.equipment.name : "Loading...")}
+        />
+      </Stack>
       <CardActions>
         {!approved && (
           <Button
diff --git a/client/src/pages/lab_management/users/HoldCard.tsx b/client/src/pages/lab_management/users/HoldCard.tsx
index c0fad7f5..47134ab3 100644
--- a/client/src/pages/lab_management/users/HoldCard.tsx
+++ b/client/src/pages/lab_management/users/HoldCard.tsx
@@ -32,7 +32,6 @@ export default function HoldCard({ hold, userID }: HoldCardProps) {
 	return (
 		<Card
 			sx={{
-        backgroundColor: removed ? (localStorage.getItem("themeMode") === "dark" ? "grey.900" : "grey.100") : (localStorage.getItem("themeMode") === "dark" ? "#150000" : "#fff8f8"),
 				border: `1px solid ${removed ? "grey" : "red"}`,
 			}}
 		>
@@ -42,7 +41,7 @@ export default function HoldCard({ hold, userID }: HoldCardProps) {
 				</Typography>
 			)}
 			<CardActions sx={{ px: 2 }}>
-				<Stack sx={{ flex: 1, color: "#595959" }}>
+				<Stack sx={{ flex: 1 }}>
 					<Typography variant="body2">
 						Placed by {`${hold.creator.firstName} ${hold.creator.lastName}`} on{" "}
 						{format(parseISO(hold.createDate), "M/d/yy h:mmaaa")}
diff --git a/client/src/pages/lab_management/users/TrainerEquipmentSelect.tsx b/client/src/pages/lab_management/users/TrainerEquipmentSelect.tsx
index 2ede8259..439b7933 100644
--- a/client/src/pages/lab_management/users/TrainerEquipmentSelect.tsx
+++ b/client/src/pages/lab_management/users/TrainerEquipmentSelect.tsx
@@ -1,13 +1,13 @@
 import { useQuery } from "@apollo/client/react";
 import { useCurrentUser } from "../../../common/CurrentUserProvider"
 import { GET_EQUIPMENTS } from "../../../queries/equipmentQueries";
-import { MenuItem, Select } from "@mui/material";
+import { FormControl, InputLabel, MenuItem, Select } from "@mui/material";
 import RequestWrapper2 from "../../../common/RequestWrapper2";
 import { isManagerFor } from "../../../common/PrivilegeUtils";
 
 interface TrainerEquipmentSelectProps {
     user: any;
-    setAddTrainerPerms: (id: number)=>void;
+    setAddTrainerPerms: (id: number) => void;
 }
 
 export default function TrainerEquipmentSelect(props: TrainerEquipmentSelectProps) {
@@ -24,13 +24,16 @@ export default function TrainerEquipmentSelect(props: TrainerEquipmentSelectProp
             const sortedEquipment = possibleEquipments.sort((a, b) => (a.name.toLowerCase().localeCompare(b.name.toLowerCase())));
 
             return (
-                <Select id="add-trainer-permissions" label="Equipment" fullWidth onChange={(e) => props.setAddTrainerPerms(Number(e.target.value))}>
-                    {
-                        sortedEquipment.map((equipment) => {
-                            return <MenuItem value={equipment.id}>{equipment.name} ID: {equipment.id}</MenuItem>
-                        })
-                    }
-                </Select>
+                <FormControl fullWidth>
+                    <InputLabel id="add-trainer-permissions">Equipment</InputLabel>
+                    <Select id="add-trainer-permissions" label="Equipment" fullWidth onChange={(e) => props.setAddTrainerPerms(Number(e.target.value))}>
+                        {
+                            sortedEquipment.map((equipment) => {
+                                return <MenuItem value={equipment.id}>{equipment.name} ID: {equipment.id}</MenuItem>
+                            })
+                        }
+                    </Select>
+                </FormControl>
             );
         }} />
     );
diff --git a/client/src/pages/lab_management/users/UserPage.tsx b/client/src/pages/lab_management/users/UserPage.tsx
index 051e49b3..22877675 100644
--- a/client/src/pages/lab_management/users/UserPage.tsx
+++ b/client/src/pages/lab_management/users/UserPage.tsx
@@ -13,10 +13,12 @@ import AccessChecks from "./userpage/AccessChecks";
 import Trainings from "./userpage/Trainings";
 import Info from "./userpage/Info";
 import Notes from "./userpage/Notes";
+import { useMakeTheme } from "../../../common/MakeThemeProvider";
 
 export default function UserPage() {
-  const { userID} = useParams<{ userID: string }>();
+  const { userID } = useParams<{ userID: string }>();
   const isMobile = useIsMobile();
+  const makeTheme = useMakeTheme();
 
   const [getUser, getUserResult] = useLazyQuery(GET_USER);
 
@@ -30,15 +32,16 @@ export default function UserPage() {
         result={getUserResult}
         render={({ user }) => {
           return (
-            <Stack>
+            <Stack spacing={4}>
+              <title>{`${user.firstName} ${user.lastName} | ${makeTheme.title}`}</title>
               <Info user={user} />
-              <Stack direction={isMobile ? "column" : "row"} width="100%" mt={4} spacing={4} justifyContent="center">
-                <Stack width="50%">
+              <Stack direction={isMobile ? "column" : "row"} width="100%" spacing={4} justifyContent="center">
+                <Stack width={isMobile ? "100%" : "50%"}>
                   <AccessChecks user={user} />
                   <Trainings user={user} />
                 </Stack>
 
-                <Stack width="50%">
+                <Stack width={isMobile ? "100%" : "50%"}>
                   <HoldsRestrictions user={user} />
                   <PrivilegeControl user={user} isMobile={isMobile} />
                   <CardTagSettings userID={user.id} hasCardTag={(user.cardTagID != null && user.cardTagID !== "")} />
diff --git a/client/src/pages/lab_management/users/userpage/AccessChecks.tsx b/client/src/pages/lab_management/users/userpage/AccessChecks.tsx
index 90e856af..d6a5ed35 100644
--- a/client/src/pages/lab_management/users/userpage/AccessChecks.tsx
+++ b/client/src/pages/lab_management/users/userpage/AccessChecks.tsx
@@ -8,6 +8,8 @@ import { AccessCheckExtraInfo, GET_USER } from "../../../../queries/userQueries"
 import { useState } from "react";
 import AccessCheckCard from "../AccessCheckCard";
 import CreateAccessCheckModal from "./CreateAccessCheckModal";
+import SearchBar from "../../../../common/SearchBar";
+import { useIsMobile } from "../../../../common/IsMobileProvider";
 
 const REFRESH_CHECKS = gql`
   mutation RefreshAccessChecks($userID: ID!) {
@@ -21,8 +23,10 @@ interface AccessCheckProps {
 
 export default function AccessChecks(props: AccessCheckProps) {
   const currentUser = useCurrentUser();
+  const isMobile = useIsMobile();
 
   const [createAccessCheckModal, setCreateAccessCheckModal] = useState(false);
+  const [searchText, setSearchtext] = useState("");
 
   const [refreshCheck, refreshCheckResult] = useMutation(REFRESH_CHECKS, { variables: { userID: props.user.id }, refetchQueries: [{ query: GET_USER, variables: { id: props.user.id } }] });
 
@@ -34,24 +38,37 @@ export default function AccessChecks(props: AccessCheckProps) {
     )
   );
 
+  const searchedACs: AccessCheckExtraInfo[] = filteredACs.filter(
+    (ac: AccessCheckExtraInfo) => (
+      ac.equipment.name.toLowerCase().includes(searchText.toLowerCase()) || ac.equipment.subName.toLowerCase().includes(searchText.toLowerCase())
+    )
+  )
+
   return (
-    <Stack >
-      <Typography variant="h6" component="div" mb={1}>
-        Access Checks
-      </Typography>
-
-      <Stack direction={"row"} spacing={1}>
-        <ActionButton iconSize={5} color="info" appearance={"small"} variant="outlined" handleClick={async () => { refreshCheck() }} loading={refreshCheckResult.loading} buttonText="Refresh Checks" tooltipText="Purge all unapproved checks and repopulate based on currently passed modules." />
-        {isManager(currentUser) && <ActionButton iconSize={5} color="primary" appearance={"small"} variant="outlined" handleClick={async () => { setCreateAccessCheckModal(true) }} loading={false} buttonText="Create Check" />}
+    <Stack spacing={1}>
+      <Stack direction={isMobile ? "column" : "row"} justifyContent={"space-between"}>
+        <Typography variant="h6" component="div">
+          Access Checks
+        </Typography>
+        <Stack direction={"row"} spacing={1}>
+          {isManager(currentUser) && <ActionButton iconSize={5} color="primary" appearance={"small"} variant="outlined" handleClick={async () => { setCreateAccessCheckModal(true) }} loading={false} buttonText="Create Check" />}
+          <ActionButton iconSize={5} color="info" appearance={"small"} variant="outlined" handleClick={async () => { refreshCheck() }} loading={refreshCheckResult.loading} buttonText="Refresh Checks" tooltipText="Purge all unapproved checks and repopulate based on currently passed modules." />
+        </Stack>
       </Stack>
-
-      <Stack spacing={1} mt={2}>
-        {filteredACs != null && filteredACs.map((accessCheck: AccessCheckExtraInfo) => (
+      <SearchBar
+        onChange={(e) => setSearchtext(e.target.value)}
+        onClear={() => setSearchtext("")}
+        sx={{
+          width: "100%"
+        }}
+      />
+      <Stack spacing={1}>
+        {searchedACs != null && searchedACs.map((accessCheck: AccessCheckExtraInfo) => (
           <AccessCheckCard key={accessCheck.id} accessCheck={accessCheck} userID={props.user.id} />
         ))}
       </Stack>
 
-      {(filteredACs == null || (filteredACs.length === 0)) && (
+      {(searchedACs == null || (searchedACs.length === 0)) && (
         <Alert severity="info">No Access Checks Available</Alert>
       )}
 
diff --git a/client/src/pages/lab_management/users/userpage/HoldsRestrictions.tsx b/client/src/pages/lab_management/users/userpage/HoldsRestrictions.tsx
index 7106f820..e4ceedac 100644
--- a/client/src/pages/lab_management/users/userpage/HoldsRestrictions.tsx
+++ b/client/src/pages/lab_management/users/userpage/HoldsRestrictions.tsx
@@ -78,86 +78,87 @@ export default function HoldsRestrictions(props: HoldsRestrictionsProps) {
 
 
   return (
-    <Stack>
-      <Stack direction="row" justifyContent={"space-between"} mb={1}>
-        <Typography variant="h6">
-          Account Holds
-        </Typography>
-        <Button
-          color="error"
-          variant="contained"
-          onClick={handlePlaceHoldClicked}
-          startIcon={<BlockIcon />}
-          disabled={!isStaff(currentUser)}
-        >
-          Place hold
-        </Button>
-      </Stack>
-
-      {props.user.holds.length === 0 && (
-        <Alert severity="success">No Holds!</Alert>
-      )}
-
-      <Stack spacing={2}>
-        {props.user.holds.map((hold: Hold) => (
-          <HoldCard key={hold.id} hold={hold} userID={props.user.id} />
-        ))}
-      </Stack>
-
-
-      <Typography variant="h6" component="div" mt={2} mb={1}>
-        Account Restrictions
-      </Typography>
-
-      {props.user.restrictions.length === 0 && (
-        <Alert severity="success">No Restrictions!</Alert>
-      )}
-
-      <Stack spacing={2}>
-        {props.user.restrictions.map((restriction: Restriction) => (
-          <RestrictionCard key={restriction.id} restriction={restriction} userID={props.user.id} />
-        ))}
+    <Stack spacing={3}>
+      <Stack spacing={1}>
+        <Stack direction="row" justifyContent={"space-between"}>
+          <Typography variant="h6">
+            Account Holds
+          </Typography>
+          <Button
+            color="error"
+            variant="contained"
+            onClick={handlePlaceHoldClicked}
+            startIcon={<BlockIcon />}
+            disabled={!isStaff(currentUser)}
+          >
+            Place hold
+          </Button>
+        </Stack>
+
+        {props.user.holds.length === 0 && (
+          <Alert severity="success">No Holds!</Alert>
+        )}
+
+        <Stack spacing={2}>
+          {props.user.holds.map((hold: Hold) => (
+            <HoldCard key={hold.id} hold={hold} userID={props.user.id} />
+          ))}
+        </Stack>
       </Stack>
-
-      {
-        isStaff(currentUser)
-          ? < RequestWrapper2 result={getMakerspacesResult} render={(data) => {
-
-            const fullSpaces: FullMakerspace[] = data.makerspaces;
-            // I hate typescript I hate typescript I hate typescript I hate typescript I hate typescript I hate typescript I hate typescript I hate typescript 
-            const potentialRestrictions = fullSpaces.filter((space: FullMakerspace) => isStaffFor(currentUser, Number(space.id)))
-
-            return (
-              <Stack direction="row" spacing={1} mt={2} alignItems={"center"}>
-                <FormControl fullWidth>
-                  <InputLabel id="restriction-makerspace">Makerspace</InputLabel>
-                  <Select id="restriction-makerspace"
-                    label="Makerspace"
-                    onChange={(e) => setRestrictionMakerspace(Number(e.target.value))}
-                    fullWidth
+      <Stack spacing={1}>
+        <Typography variant="h6" component="div" mt={2} mb={1}>
+          Account Restrictions
+        </Typography>
+        {
+          isStaff(currentUser)
+            ? < RequestWrapper2 result={getMakerspacesResult} render={(data) => {
+
+              const fullSpaces: FullMakerspace[] = data.makerspaces;
+              // I hate typescript I hate typescript I hate typescript I hate typescript I hate typescript I hate typescript I hate typescript I hate typescript 
+              const potentialRestrictions = fullSpaces.filter((space: FullMakerspace) => isStaffFor(currentUser, Number(space.id)))
+
+              return (
+                <Stack direction="row" spacing={1} mt={2} alignItems={"center"}>
+                  <FormControl fullWidth>
+                    <InputLabel id="restriction-makerspace">Makerspace</InputLabel>
+                    <Select id="restriction-makerspace"
+                      label="Makerspace"
+                      onChange={(e) => setRestrictionMakerspace(Number(e.target.value))}
+                      fullWidth
+                    >
+                      {
+                        potentialRestrictions.map((space: FullMakerspace) => (
+                          <MenuItem value={space.id}>{space.name} ID: {space.id}</MenuItem>
+                        ))
+                      }
+                    </Select>
+                  </FormControl>
+                  <Button
+                    variant="contained"
+                    color="warning"
+                    onClick={handleCreateRestriction}
+                    startIcon={<LockIcon />}
+                    sx={{ whiteSpace: "nowrap", minWidth: "unset", height: "100%" }}
                   >
-                    {
-                      potentialRestrictions.map((space: FullMakerspace) => (
-                        <MenuItem value={space.id}>{space.name} ID: {space.id}</MenuItem>
-                      ))
-                    }
-                  </Select>
-                </FormControl>
-                <Button
-                  variant="contained"
-                  color="error"
-                  onClick={handleCreateRestriction}
-                  startIcon={<LockIcon />}
-                  sx={{ whiteSpace: "nowrap", minWidth: "unset" }}
-                >
-                  Place Restriction
-                </Button>
-              </Stack>
-            );
-          }
-          } />
-          : null
-      }
+                    Place Restriction
+                  </Button>
+                </Stack>
+              );
+            }
+            } />
+            : null
+        }
+
+        {props.user.restrictions.length === 0 && (
+          <Alert severity="success" variant="filled">No Restrictions!</Alert>
+        )}
+
+        <Stack spacing={2}>
+          {props.user.restrictions.map((restriction: Restriction) => (
+            <RestrictionCard key={restriction.id} restriction={restriction} userID={props.user.id} />
+          ))}
+        </Stack>
+      </Stack>
     </Stack>
   )
 }
\ No newline at end of file
diff --git a/client/src/pages/lab_management/users/userpage/Info.tsx b/client/src/pages/lab_management/users/userpage/Info.tsx
index 5df2f5d4..69302b56 100644
--- a/client/src/pages/lab_management/users/userpage/Info.tsx
+++ b/client/src/pages/lab_management/users/userpage/Info.tsx
@@ -15,8 +15,8 @@ interface InfoProps {
 export default function Info(props: InfoProps) {
   const isMobile = useIsMobile();
   const navigate = useNavigate();
-  const { makerspaceID} = useParams<{ makerspaceID: string }>();
-  
+  const { makerspaceID } = useParams<{ makerspaceID: string }>();
+
 
   return (
     <Stack>
@@ -37,39 +37,36 @@ export default function Info(props: InfoProps) {
             <Typography>{props.user.pronouns}</Typography>
           </Stack>
         </Stack>
-        <IconButton onClick={() => navigate(`/makerspace/${makerspaceID}/people`)} sx={{ width: "51px", height: "51px", p: 0, fontSize: 14 }} >
-          <ArrowBackIcon sx={{ fontSize: 18 }} /> Back
-        </IconButton>
-        {/* <NavLink
-                  primary={"All People"}
-                  to={`/makerspace/${makerspaceID}/people`}
-                  icon={<ArrowBackIcon />}
-                /> */}
-      </Stack>
-      <Stack direction={isMobile ? "column" : "row"} justifyContent={isMobile ? undefined : "space-between"} mt={4}>
-        <Stack direction={isMobile ? "column" : "row"} spacing={isMobile ? 2 : 6}>
-          <InfoBlob
-            label="Member Since"
-            value={format(parseISO(props.user.registrationDate), "MM/dd/yyyy")}
-          />
-          <InfoBlob
-            label="College"
-            value={props.user.college}
-          />
-          <InfoBlob
-            label="Expected Graduation"
-            value={props.user.expectedGraduation}
-          />
-        </Stack>
         <Button
           startIcon={<HistoryIcon />}
-          variant="outlined"
+          variant="contained"
           color="secondary"
           onClick={() => navigate(`/makerspace/${makerspaceID}/history?q=<user:${props.user.id}:`)}
+          size={isMobile ? "small" : undefined}
+          sx={{
+            height: "max-content"
+          }}
         >
           View logs
         </Button>
       </Stack>
+      {
+        isMobile ? null
+          : <Stack direction={isMobile ? "row" : "row"} spacing={isMobile ? undefined : 6} justifyContent={isMobile ? "space-between" : undefined}>
+            <InfoBlob
+              label="Member Since"
+              value={format(parseISO(props.user.registrationDate), "MM/dd/yyyy")}
+            />
+            <InfoBlob
+              label="College"
+              value={props.user.college}
+            />
+            <InfoBlob
+              label="Expected Graduation"
+              value={props.user.expectedGraduation}
+            />
+          </Stack>
+      }
       {
         props.user.archived && <Alert severity="warning" variant="filled">This user is archived!</Alert>
       }
diff --git a/client/src/pages/lab_management/users/userpage/PrivilegeControl.tsx b/client/src/pages/lab_management/users/userpage/PrivilegeControl.tsx
index cbdfeb46..2d9c8746 100644
--- a/client/src/pages/lab_management/users/userpage/PrivilegeControl.tsx
+++ b/client/src/pages/lab_management/users/userpage/PrivilegeControl.tsx
@@ -117,7 +117,7 @@ export default function PrivilegeControl(props: PrivilegeControlProps) {
               <Stack direction="row" spacing={1}>
                 {
                   managerSpaces.length === 0
-                    ? <Alert severity="info">Not a Manager!</Alert>
+                    ? <Alert severity="info" variant="filled">Not a Manager!</Alert>
                     : managerSpaces.map((space: FullMakerspace) => {
                       return (
                         <Card sx={{ maxWidth: "200px", padding: "10px" }}>
@@ -152,13 +152,13 @@ export default function PrivilegeControl(props: PrivilegeControlProps) {
                     }
                   </Select>
                 </FormControl>
-									<Button
-										variant="contained"
-										color="success"
-										onClick={handleAddManagerPerms}
-										startIcon={<PersonAddIcon />}
-										disabled={!isStaff(currentUser)}
-									>
+                <Button
+                  variant="contained"
+                  color="success"
+                  onClick={handleAddManagerPerms}
+                  startIcon={<PersonAddIcon />}
+                  disabled={!isStaff(currentUser)}
+                >
                   Add
                 </Button>
               </Stack>
@@ -168,7 +168,7 @@ export default function PrivilegeControl(props: PrivilegeControlProps) {
               <Stack direction="row" spacing={1}>
                 {
                   staffSpaces.length === 0
-                    ? <Alert severity="info">Not Staff!</Alert>
+                    ? <Alert severity="info" variant="filled">Not Staff!</Alert>
                     : staffSpaces.map((space: FullMakerspace) => {
                       return (
                         <Card sx={{ maxWidth: "200px", padding: "10px" }}>
@@ -203,13 +203,13 @@ export default function PrivilegeControl(props: PrivilegeControlProps) {
                     }
                   </Select>
                 </FormControl>
-									<Button
-										variant="contained"
-										color="success"
-										onClick={handleAddStaffPerms}
-										startIcon={<PersonAddIcon />}
-                    disabled={!isStaff(currentUser)}
-									>
+                <Button
+                  variant="contained"
+                  color="success"
+                  onClick={handleAddStaffPerms}
+                  startIcon={<PersonAddIcon />}
+                  disabled={!isStaff(currentUser)}
+                >
                   Add
                 </Button>
               </Stack>
@@ -219,24 +219,21 @@ export default function PrivilegeControl(props: PrivilegeControlProps) {
               <Stack direction="row" spacing={1}>
                 {
                   props.user.trainer.length === 0
-                    ? <Alert severity="info">Not a Trainer!</Alert>
+                    ? <Alert severity="info" variant="filled">Not a Trainer!</Alert>
                     : props.user.trainer.map((equipmentID: number) => (
                       <TrainerCard equipmentID={equipmentID} removeTrainerPerms={removeTrainerPerms} />
                     ))
                 }
               </Stack>
               <Stack direction="row" spacing={1}>
-                <FormControl fullWidth>
-                  <InputLabel id="add-trainer-permissions"></InputLabel>
-                  <TrainerEquipmentSelect user={props.user} setAddTrainerPerms={setAddTrainerPerms} />
-                </FormControl>
-									<Button
-										variant="contained"
-										color="success"
-										onClick={handleAddTrainerPerms}
-										startIcon={<PersonAddIcon />}
-                    disabled={!isStaff(currentUser)}
-									>
+                <TrainerEquipmentSelect user={props.user} setAddTrainerPerms={setAddTrainerPerms} />
+                <Button
+                  variant="contained"
+                  color="success"
+                  onClick={handleAddTrainerPerms}
+                  startIcon={<PersonAddIcon />}
+                  disabled={!isStaff(currentUser)}
+                >
                   Add
                 </Button>
               </Stack>
diff --git a/client/src/pages/lab_management/users/userpage/Trainings.tsx b/client/src/pages/lab_management/users/userpage/Trainings.tsx
index 47bc0f63..ad71516d 100644
--- a/client/src/pages/lab_management/users/userpage/Trainings.tsx
+++ b/client/src/pages/lab_management/users/userpage/Trainings.tsx
@@ -49,7 +49,7 @@ export default function Trainings(props: TrainingProps) {
       <Box sx={{ maxHeight: "300px", overflowY: "scroll" }}>
         <Stack spacing={0.5}>
           {props.user.passedModules != null && props.user.passedModules.map((module: { moduleID: number, moduleName: string, passedDate: string, makerspaceID: string }) => (
-            <Card sx={{ p: "0.25em", backgroundColor: (localStorage.getItem("themeMode") === "dark" ? "grey.900" : "grey.100"), border: `1px solid grey` }}>
+            <Card sx={{ p: "0.25em", border: `1px solid grey` }}>
               <Stack direction={"row"} sx={{ justifyContent: "space-between" }} alignItems={"center"}>
                 <Typography>{module.moduleName}</Typography>
                 <Stack direction={"row"} spacing={1} alignItems={"center"}>
@@ -75,14 +75,14 @@ export default function Trainings(props: TrainingProps) {
 
       {
         (props.user.trainingHolds == null || (props.user.trainingHolds.length === 0)) && (
-          <Alert severity="success">No Locked Trainings</Alert>
+          <Alert severity="success" variant="filled">No Locked Trainings</Alert>
         )
       }
 
       <Box sx={{ maxHeight: "300px", overflowY: "scroll" }}>
         <Stack spacing={0.5}>
           {props.user.trainingHolds != null && props.user.trainingHolds.map((hold: { id: number; expires: Date; module: { id: number; name: string } }) => (
-            <Card sx={{ p: "0.25em", backgroundColor: (localStorage.getItem("themeMode") === "dark" ? "grey.900" : "grey.100"), border: `1px solid grey` }}>
+            <Card sx={{ p: "0.25em", border: `1px solid grey` }}>
               <Stack direction={"row"} alignItems={"center"} sx={{ justifyContent: "space-between" }}>
                 <Stack direction={"row"} alignItems={"center"} spacing={2}>
                   <Typography color={"secondary"}><b>Exp: </b>{format(new Date(hold.expires), "M/d/yy h:mmaaa")}</Typography>
diff --git a/client/src/queries/userQueries.ts b/client/src/queries/userQueries.ts
index b285fa4c..376be5cd 100644
--- a/client/src/queries/userQueries.ts
+++ b/client/src/queries/userQueries.ts
@@ -22,6 +22,7 @@ export interface AccessCheckExtraInfo {
   equipment: {
     id: number;
     name: string;
+    subName: string;
     requiresTrainerApproval: boolean;
     room: {
       makerspace: {
@@ -156,6 +157,7 @@ export const GET_USER = gql`
         equipment {
           id
           name
+          subName
           requiresTrainerApproval
           room {
             makerspace {