diff --git a/src/components/GordonDialogBox/index.tsx b/src/components/GordonDialogBox/index.tsx
index 0f3775efa2..89775ffc4d 100644
--- a/src/components/GordonDialogBox/index.tsx
+++ b/src/components/GordonDialogBox/index.tsx
@@ -7,15 +7,15 @@ import {
   DialogProps,
   DialogTitle,
 } from '@mui/material';
-import { KeyboardEvent, PropsWithChildren } from 'react';
+import { KeyboardEvent, MouseEvent, MouseEventHandler, PropsWithChildren } from 'react';
 
 type Props = {
   open: boolean;
   title: string;
-  buttonClicked: (event: {}) => void;
+  buttonClicked?: (event: KeyboardEvent<HTMLDivElement> | MouseEvent<HTMLButtonElement>) => void;
   buttonName?: string;
   isButtonDisabled?: boolean;
-  cancelButtonClicked?: (event: {}) => void;
+  cancelButtonClicked?: MouseEventHandler<HTMLButtonElement>;
   cancelButtonName?: string;
   severity?: AlertColor;
 } & Partial<DialogProps>;
@@ -33,7 +33,7 @@ const GordonDialogBox = ({
 }: PropsWithChildren<Props>) => {
   const handleKeyPress = (event: KeyboardEvent<HTMLDivElement>) => {
     if (
-      !isButtonDisabled &&
+      buttonClicked &&
       event.key === 'Enter' &&
       event.currentTarget.classList.contains('MuiDialog-root')
     ) {
diff --git a/src/components/GordonOffline/index.tsx b/src/components/GordonOffline/index.tsx
index 29381ad9c0..908d1c176a 100644
--- a/src/components/GordonOffline/index.tsx
+++ b/src/components/GordonOffline/index.tsx
@@ -2,6 +2,11 @@ import { Button, Card, CardContent, Grid } from '@mui/material/';
 import { Link } from 'react-router-dom';
 import styles from './GordonOffline.module.css';
 
+/**
+ * @param {Object} props props
+ * @param {string} props.feature - Text representing the content the user tried to access
+ * @returns {JSX.Element} A card with a message that the user must connect to view content
+ */
 type Props = {
   feature: string;
 };
diff --git a/src/components/GordonTooltip/index.tsx b/src/components/GordonTooltip/index.tsx
index 5a19e4f929..c451d30dad 100644
--- a/src/components/GordonTooltip/index.tsx
+++ b/src/components/GordonTooltip/index.tsx
@@ -2,12 +2,12 @@ import { Tooltip, TooltipProps } from '@mui/material';
 import HelpIcon from '@mui/icons-material/Help';
 import styles from './GordonTooltip.module.css';
 
-const GordonTooltip = (props: TooltipProps) => {
+const GordonTooltip = ({ children, title, ...OtherProps }: TooltipProps) => {
   return (
     <Tooltip
-      {...props}
       classes={{ tooltip: styles.tooltip }}
-      title={<span className={styles.tooltipTitle}>{props.children}</span>}
+      title={<span className={styles.tooltipTitle}>{children}</span>}
+      {...OtherProps}
     >
       <HelpIcon className={styles.helpIcon} />
     </Tooltip>
diff --git a/src/components/Header/components/QuickSearch/index.tsx b/src/components/Header/components/QuickSearch/index.tsx
index 9644740120..c1e99f7389 100644
--- a/src/components/Header/components/QuickSearch/index.tsx
+++ b/src/components/Header/components/QuickSearch/index.tsx
@@ -80,9 +80,9 @@ const performSearch = debounce(
 
 type Props =
   | {
-      disableLink: true;
-      customPlaceholderText: string;
-      onSearchSubmit: (person: SearchResult) => void;
+      disableLink?: true;
+      customPlaceholderText?: string;
+      onSearchSubmit?: (person: SearchResult) => void;
       searchFunction?: SearchFunction;
     }
   | {
@@ -106,7 +106,7 @@ const GordonQuickSearch = ({
     ? 'Offline'
     : customPlaceholderText ?? (width < BREAKPOINT_WIDTH ? 'People' : 'People Search');
 
-  const handleInput = (_event: any, value: string) => {
+  const handleInput = (_event: React.SyntheticEvent, value: string) => {
     // remove special characters
     const query = value.replace(specialCharactersRegex, '');
 
@@ -118,7 +118,7 @@ const GordonQuickSearch = ({
     }
   };
 
-  const handleSubmit = (_event: any, person: SearchResult | null) => {
+  const handleSubmit = (_event: React.SyntheticEvent, person: SearchResult | null) => {
     if (!person) return;
     disableLink ? onSearchSubmit!(person) : navigate(`/profile/${person.UserName}`);
   };
diff --git a/src/components/PWAInstructions/index.jsx b/src/components/PWAInstructions/index.tsx
similarity index 75%
rename from src/components/PWAInstructions/index.jsx
rename to src/components/PWAInstructions/index.tsx
index 46f9ee9a61..ddd55eae17 100644
--- a/src/components/PWAInstructions/index.jsx
+++ b/src/components/PWAInstructions/index.tsx
@@ -2,6 +2,7 @@ import { useState } from 'react';
 import GetAppIcon from '@mui/icons-material/GetApp';
 import ToggleButton from '@mui/material/ToggleButton';
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
+import BeforeInstallPromptEvent from '@mui/material';
 import styles from './PWAInstructions.module.css';
 
 import DesktopChromeInstall from './images/Desktop/Desktop-Chrome-Install-360.png';
@@ -118,12 +119,30 @@ const devices = {
   },
 };
 
-const PWAInstructions = (props) => {
-  const [device, setDevice] = useState(null);
-  const [platform, setPlatform] = useState(null);
+interface BeforeInstallPromptEvent extends Event {
+  readonly platforms: string[];
+  readonly userChoice: Promise<{
+    outcome: 'accepted' | 'dismissed';
+    platform: string;
+  }>;
+  prompt(): Promise<void>;
+}
+
+type Props = {
+  open: boolean;
+  handleDisplay: () => void;
+  deferredPWAPrompt: BeforeInstallPromptEvent;
+};
+
+const PWAInstructions = ({ open, handleDisplay, deferredPWAPrompt }: Props) => {
+  const [device, setDevice] = useState<string | null>(null);
+  const [platform, setPlatform] = useState<string | null>(null);
 
   // Handles which device is selected
-  const handleDeviceChange = (event, selectedDevice) => {
+  const handleDeviceChange = (
+    event: React.MouseEvent<HTMLElement>,
+    selectedDevice: string | null,
+  ) => {
     // Checks the selected device to prevent the user from deselecting a selected toggle
     if (selectedDevice === 'Desktop') {
       setDevice(selectedDevice);
@@ -136,7 +155,10 @@ const PWAInstructions = (props) => {
   };
 
   // Handles which platform is selected
-  const handlePlatformChange = (event, selectedPlatform) => {
+  const handlePlatformChange = (
+    event: React.MouseEvent<HTMLElement>,
+    selectedPlatform: string | null,
+  ) => {
     // Checks the selected platform to prevent the user from deselecting a selected toggle
     if (selectedPlatform !== null) setPlatform(selectedPlatform);
   };
@@ -178,85 +200,97 @@ const PWAInstructions = (props) => {
           >
             <Typography variant="h5">Instructions for {preText}</Typography>
           </Grid>
-          {devices[device][platform].map((step, index) => {
-            /**
-             * The first step is processed differently from the rest in order to show a link to
-             * download Google Chrome. This is for all platforms except "Apple" since the PWA can
-             * only be installed through Safari with Apple
-             */
-            if (index === 0 && platform !== 'Apple') {
-              return (
-                <Grid container xs={12}>
-                  <Grid
-                    container
-                    xs={12}
-                    alignItems="center"
-                    className={styles.pwa_instructions_content_container_toggles_instructions_text}
-                  >
-                    <Typography
-                      variant="h6"
+          {
+            //@ts-ignore TypeScript cannot encode the fact that platform may have a different value depending on the value of device
+            devices[device][platform] //
+              .map((step: string[], index: number) => {
+                /**
+                 * The first step is processed differently from the rest in order to show a link to
+                 * download Google Chrome. This is for all platforms except "Apple" since the PWA can
+                 * only be installed through Safari with Apple
+                 */
+                if (index === 0 && platform !== 'Apple') {
+                  return (
+                    <Grid container xs={12}>
+                      <Grid
+                        container
+                        xs={12}
+                        alignItems="center"
+                        className={
+                          styles.pwa_instructions_content_container_toggles_instructions_text
+                        }
+                      >
+                        <Typography
+                          variant="h6"
+                          className={
+                            styles.pwa_instructions_content_container_toggles_instructions_text_step
+                          }
+                        >
+                          Step {index + 1}:&nbsp;
+                        </Typography>
+                        <Typography
+                          variant="subtitle1"
+                          className={
+                            styles.pwa_instructions_content_container_toggles_instructions_text_instruction
+                          }
+                        >
+                          {step[0]}&nbsp;
+                          <a href={step[1]}>click here</a>.
+                        </Typography>
+                      </Grid>
+                      <Grid
+                        container
+                        xs={12}
+                        className={
+                          styles.pwa_instructions_content_container_toggles_instructions_image
+                        }
+                      >
+                        <img src={step[2]} alt={step[3]} />
+                      </Grid>
+                    </Grid>
+                  );
+                }
+                // Creates the JSX of the current step containing the instruction and its corresponding image
+                return (
+                  <Grid container xs={12}>
+                    <Grid
+                      container
+                      xs={12}
+                      alignItems="center"
                       className={
-                        styles.pwa_instructions_content_container_toggles_instructions_text_step
+                        styles.pwa_instructions_content_container_toggles_instructions_text
                       }
                     >
-                      Step {index + 1}:&nbsp;
-                    </Typography>
-                    <Typography
-                      variant="subtitle1"
+                      <Typography
+                        variant="h6"
+                        className={
+                          styles.pwa_instructions_content_container_toggles_instructions_text_step
+                        }
+                      >
+                        Step {index + 1}:&nbsp;
+                      </Typography>
+                      <Typography
+                        variant="subtitle1"
+                        className={
+                          styles.pwa_instructions_content_container_toggles_instructions_text_instruction
+                        }
+                      >
+                        {step[0]}
+                      </Typography>
+                    </Grid>
+                    <Grid
+                      container
+                      xs={12}
                       className={
-                        styles.pwa_instructions_content_container_toggles_instructions_text_instruction
+                        styles.pwa_instructions_content_container_toggles_instructions_image
                       }
                     >
-                      {step[0]}&nbsp;
-                      <a href={step[1]}>click here</a>.
-                    </Typography>
-                  </Grid>
-                  <Grid
-                    container
-                    xs={12}
-                    className={styles.pwa_instructions_content_container_toggles_instructions_image}
-                  >
-                    <img src={step[2]} alt={step[3]} />
+                      <img src={step[1]} alt={step[2]} />
+                    </Grid>
                   </Grid>
-                </Grid>
-              );
-            }
-            // Creates the JSX of the current step containing the instruction and its corresponding image
-            return (
-              <Grid container xs={12}>
-                <Grid
-                  container
-                  xs={12}
-                  alignItems="center"
-                  className={styles.pwa_instructions_content_container_toggles_instructions_text}
-                >
-                  <Typography
-                    variant="h6"
-                    className={
-                      styles.pwa_instructions_content_container_toggles_instructions_text_step
-                    }
-                  >
-                    Step {index + 1}:&nbsp;
-                  </Typography>
-                  <Typography
-                    variant="subtitle1"
-                    className={
-                      styles.pwa_instructions_content_container_toggles_instructions_text_instruction
-                    }
-                  >
-                    {step[0]}
-                  </Typography>
-                </Grid>
-                <Grid
-                  container
-                  xs={12}
-                  className={styles.pwa_instructions_content_container_toggles_instructions_image}
-                >
-                  <img src={step[1]} alt={step[2]} />
-                </Grid>
-              </Grid>
-            );
-          })}
+                );
+              })
+          }
         </Grid>
       );
     }
@@ -264,7 +298,7 @@ const PWAInstructions = (props) => {
 
   function createContent() {
     // If the browser has quick PWA installation capability
-    if (props.deferredPWAPrompt) {
+    if (deferredPWAPrompt) {
       return (
         <Grid
           container
@@ -286,7 +320,7 @@ const PWAInstructions = (props) => {
             <Button
               onClick={() => {
                 // Exits out the dialog box
-                props.handleDisplay();
+                handleDisplay();
               }}
               className={styles.button_cancel}
             >
@@ -295,7 +329,7 @@ const PWAInstructions = (props) => {
             <Button
               onClick={() => {
                 // Calls the browser's default prompt to do a quick installation of the PWA
-                props.deferredPWAPrompt.prompt();
+                deferredPWAPrompt.prompt();
               }}
               className={styles.button_install}
             >
@@ -423,7 +457,7 @@ const PWAInstructions = (props) => {
             <Button
               onClick={() => {
                 // Exits out the dialog box
-                props.handleDisplay();
+                handleDisplay();
               }}
               className={styles.button_cancel}
             >
@@ -437,7 +471,7 @@ const PWAInstructions = (props) => {
 
   return (
     <Dialog
-      open={props.open}
+      open={open}
       fullWidth
       maxWidth="sm"
       aria-labelledby="alert-dialog-slide-title"
@@ -446,9 +480,7 @@ const PWAInstructions = (props) => {
       <Grid container className={styles.pwa_instructions}>
         <Grid container xs={12} justifyContent="center" className={styles.pwa_instructions_title}>
           <Typography variant="h5">
-            {props.deferredPWAPrompt
-              ? 'Install Gordon 360'
-              : ' Instructions to install Gordon 360 '}
+            {deferredPWAPrompt ? 'Install Gordon 360' : ' Instructions to install Gordon 360 '}
           </Typography>
         </Grid>
         <DialogContent className={styles.pwa_instructions_content}>{createContent()}</DialogContent>
diff --git a/src/components/PhotoCropper/index.tsx b/src/components/PhotoCropper/index.tsx
index dce26e8c8e..aa616518fe 100644
--- a/src/components/PhotoCropper/index.tsx
+++ b/src/components/PhotoCropper/index.tsx
@@ -32,9 +32,9 @@ const PhotoCropper = ({ open, onClose, onSubmit }: PropTypes) => {
   const [preview, setPreview] = useState<string | null>(null);
   const [snackbar, setSnackbar] = useState<{
     message: string;
-    severity: AlertColor | null;
+    severity?: AlertColor;
     open: boolean;
-  }>({ message: '', severity: null, open: false });
+  }>({ message: '', severity: undefined, open: false });
   const [cropperData, setCropperData] = useState<{
     cropBoxDim: number | undefined;
     aspectRatio: number;
diff --git a/src/components/Profile/components/EmergencyInfoList/index.jsx b/src/components/Profile/components/EmergencyInfoList/index.tsx
similarity index 78%
rename from src/components/Profile/components/EmergencyInfoList/index.jsx
rename to src/components/Profile/components/EmergencyInfoList/index.tsx
index 70b11f5bae..29c567889d 100644
--- a/src/components/Profile/components/EmergencyInfoList/index.jsx
+++ b/src/components/Profile/components/EmergencyInfoList/index.tsx
@@ -3,9 +3,9 @@ import styles from './EmergencyInfoList.module.css';
 import ProfileInfoListItem from '../ProfileInfoListItem';
 import user from 'services/user';
 
-import { Typography, Grid, Card, CardHeader, CardContent, List } from '@mui/material';
+import { Typography, Grid, Card, CardHeader, CardContent, List, ListItem } from '@mui/material';
 
-const formatPhone = (phone) => {
+const formatPhone = (phone: string) => {
   if (phone?.length === 10) {
     return `(${phone?.slice(0, 3)}) ${phone?.slice(3, 6)}-${phone?.slice(6)}`;
   } else {
@@ -13,8 +13,21 @@ const formatPhone = (phone) => {
   }
 };
 
-const EmergencyInfoList = ({ username }) => {
-  const [emergencyContacts, setEmergencyContacts] = useState([]);
+type Contact = {
+  FirstName?: string;
+  LastName?: string;
+  Relationship?: string;
+  MobilePhone: string;
+  HomePhone: string;
+  WorkPhone: string;
+};
+
+type Props = {
+  username: string;
+};
+
+const EmergencyInfoList = ({ username }: Props) => {
+  const [emergencyContacts, setEmergencyContacts] = useState<Contact[]>([]);
 
   useEffect(() => {
     const loadEmrg = async () => {
@@ -40,8 +53,8 @@ const EmergencyInfoList = ({ username }) => {
                   }`}
                   contentClass={'private'}
                 />
-                <ul type="disc">
-                  <li>
+                <List style={{ listStyleType: 'disc' }}>
+                  <ListItem>
                     <ProfileInfoListItem
                       title="Mobile Phone:"
                       contentText={
@@ -51,8 +64,8 @@ const EmergencyInfoList = ({ username }) => {
                       }
                       contentClass={'private'}
                     />
-                  </li>
-                  <li>
+                  </ListItem>
+                  <ListItem>
                     <ProfileInfoListItem
                       title="Home Phone:"
                       contentText={
@@ -62,8 +75,8 @@ const EmergencyInfoList = ({ username }) => {
                       }
                       contentClass={'private'}
                     />
-                  </li>
-                  <li>
+                  </ListItem>
+                  <ListItem>
                     <ProfileInfoListItem
                       title="Work Phone:"
                       contentText={
@@ -73,8 +86,8 @@ const EmergencyInfoList = ({ username }) => {
                       }
                       contentClass={'private'}
                     />
-                  </li>
-                </ul>
+                  </ListItem>
+                </List>
               </>
             ))}
             <Typography align="left" className={styles.disclaimer}>
diff --git a/src/components/Profile/components/Identification/components/SocialMediaLinks/components/LinksDialog/index.jsx b/src/components/Profile/components/Identification/components/SocialMediaLinks/components/LinksDialog/index.tsx
similarity index 83%
rename from src/components/Profile/components/Identification/components/SocialMediaLinks/components/LinksDialog/index.jsx
rename to src/components/Profile/components/Identification/components/SocialMediaLinks/components/LinksDialog/index.tsx
index b440b8ad53..05790e1f69 100644
--- a/src/components/Profile/components/Identification/components/SocialMediaLinks/components/LinksDialog/index.jsx
+++ b/src/components/Profile/components/Identification/components/SocialMediaLinks/components/LinksDialog/index.tsx
@@ -1,4 +1,5 @@
 import {
+  AlertColor,
   Button,
   DialogActions,
   DialogContent,
@@ -6,26 +7,33 @@ import {
   TextField,
   Typography,
 } from '@mui/material';
-import { useState } from 'react';
-import { platforms, socialMediaInfo } from 'services/socialMedia';
+import { Dispatch, SetStateAction, useState } from 'react';
+import { platforms, Platform, socialMediaInfo } from 'services/socialMedia';
 import user from 'services/user';
 import { useUserActions } from 'hooks';
 import styles from './LinksDialog.module.css';
 
-const LinksDialog = ({ links, createSnackbar, onClose, setLinks }) => {
-  const [formErrors, setFormErrors] = useState([]);
+type Props = {
+  links: Record<Platform, string>;
+  createSnackbar: (message: string, severity: AlertColor) => void;
+  onClose: () => void;
+  setLinks: Dispatch<SetStateAction<Record<Platform, string>>>;
+};
+
+const LinksDialog = ({ links, createSnackbar, onClose, setLinks }: Props) => {
+  const [formErrors, setFormErrors] = useState<Platform[]>([]);
   const [updatedLinks, setUpdatedLinks] = useState(links);
-  const [failedUpdates, setFailedUpdates] = useState([]);
+  const [failedUpdates, setFailedUpdates] = useState<Platform[]>([]);
   const hasUpdatedLink = platforms.some((platform) => updatedLinks[platform] !== links[platform]);
 
   const { updateProfile } = useUserActions();
 
-  const handleLinkUpdated = (platform, value) => {
+  const handleLinkUpdated = (platform: Platform, value: string) => {
     setUpdatedLinks((prev) => ({ ...prev, [platform]: value }));
     validateField(platform, value);
   };
 
-  const validateField = (platform, value) => {
+  const validateField = (platform: Platform, value: string) => {
     const { prefix, prefix2 } = socialMediaInfo[platform];
     const isValid =
       value === '' || value.indexOf(prefix) === 0 || (prefix2 && value.indexOf(prefix2) === 0);
@@ -49,9 +57,9 @@ const LinksDialog = ({ links, createSnackbar, onClose, setLinks }) => {
 
     responses.forEach((response) => {
       if (response.value === undefined) {
-        setFailedUpdates((prevState) => [...prevState, [response.platform]]);
+        setFailedUpdates((prevState) => [...prevState, response.platform]);
       } else {
-        setLinks((prevLinks) => ({
+        setLinks((prevLinks: Record<Platform, string>) => ({
           ...prevLinks,
           [response.platform]: updatedLinks[response.platform],
         }));
@@ -102,7 +110,6 @@ const LinksDialog = ({ links, createSnackbar, onClose, setLinks }) => {
               multiline
               className={styles.gc360_links_dialog_content_field}
               variant="outlined"
-              color="link"
             />
           </div>
         ))}
diff --git a/src/components/Profile/components/Identification/components/SocialMediaLinks/index.jsx b/src/components/Profile/components/Identification/components/SocialMediaLinks/index.tsx
similarity index 82%
rename from src/components/Profile/components/Identification/components/SocialMediaLinks/index.jsx
rename to src/components/Profile/components/Identification/components/SocialMediaLinks/index.tsx
index 5b48585b00..1b691813e3 100644
--- a/src/components/Profile/components/Identification/components/SocialMediaLinks/index.jsx
+++ b/src/components/Profile/components/Identification/components/SocialMediaLinks/index.tsx
@@ -1,16 +1,26 @@
-import { Button, Dialog, Grid, IconButton } from '@mui/material';
+import { AlertColor, Button, Dialog, Grid, IconButton } from '@mui/material';
 import EditIcon from '@mui/icons-material/Edit';
 import useNetworkStatus from 'hooks/useNetworkStatus';
 import { useState } from 'react';
-import { platforms, socialMediaInfo } from 'services/socialMedia';
+import { Profile } from 'services/user';
+import { Platform, platforms, socialMediaInfo } from 'services/socialMedia';
 // @TODO CSSMODULES - outside directory
 import styles from '../../Identification.module.css';
 import LinksDialog from './components/LinksDialog/index';
 
-const SocialMediaLinks = ({ profile, createSnackbar, myProf }) => {
+type Props = {
+  profile: Profile;
+  createSnackbar: (message: string, severity: AlertColor) => void;
+  myProf: boolean;
+};
+
+const SocialMediaLinks = ({ profile, createSnackbar, myProf }: Props) => {
   const [socialLinksOpen, setSocialLinksOpen] = useState(false);
-  const [links, setLinks] = useState(
-    platforms.reduce((links, platform) => ({ ...links, [platform]: profile[platform] || '' }), {}),
+  const [links, setLinks] = useState<Record<Platform, string>>(
+    platforms.reduce(
+      (links, platform) => ({ ...links, [platform]: profile[platform] || '' }),
+      {} as Record<Platform, string>,
+    ),
   );
   const isOnline = useNetworkStatus();
   const numberOfLinks = platforms.reduce((num, platform) => (links[platform] ? num + 1 : num), 0);
diff --git a/src/components/Profile/components/Identification/index.jsx b/src/components/Profile/components/Identification/index.tsx
similarity index 83%
rename from src/components/Profile/components/Identification/index.jsx
rename to src/components/Profile/components/Identification/index.tsx
index 74dd70287d..7bb74c8b1a 100644
--- a/src/components/Profile/components/Identification/index.jsx
+++ b/src/components/Profile/components/Identification/index.tsx
@@ -1,4 +1,5 @@
 import {
+  AlertColor,
   Button,
   CardHeader,
   Dialog,
@@ -10,12 +11,19 @@ import {
   Tooltip,
   Typography,
 } from '@mui/material';
+import {
+  Profile as profileType,
+  isStudent as checkIsStudent,
+  isFacStaff as checkIsFacStaff,
+  isAlumni as checkIsAlumni,
+} from 'services/user';
 import EmailIcon from '@mui/icons-material/Email';
 import GordonLoader from 'components/Loader/index';
 import 'cropperjs/dist/cropper.css';
 import { useUserActions } from 'hooks';
-import { useEffect, useRef, useState } from 'react';
-import Cropper from 'react-cropper';
+import { useEffect, useRef, useState, ReactNode } from 'react';
+import Cropper, { ReactCropperElement } from 'react-cropper';
+import ZoomEvent from 'react-cropper';
 import Dropzone from 'react-dropzone';
 import { Link } from 'react-router-dom';
 import { Class } from 'services/peopleSearch';
@@ -25,26 +33,36 @@ import SocialMediaLinks from './components/SocialMediaLinks';
 import defaultGordonImage from './defaultGordonImage';
 import styles from './Identification.module.css';
 
-const Identification = ({ profile, myProf, isOnline, createSnackbar }) => {
+type Props = {
+  profile: profileType;
+  myProf: boolean;
+  isOnline: boolean;
+  createSnackbar: (message: string, severity: AlertColor) => void;
+};
+
+const Identification = ({ profile, myProf, isOnline, createSnackbar }: Props) => {
   const CROP_DIM = 200; // pixels
-  const [isImagePublic, setIsImagePublic] = useState();
-  const [defaultUserImage, setDefaultUserImage] = useState();
-  const [preferredUserImage, setPreferredUserImage] = useState();
+  const [isImagePublic, setIsImagePublic] = useState<boolean>(false);
+  const [defaultUserImage, setDefaultUserImage] = useState<string | null>();
+  const [preferredUserImage, setPreferredUserImage] = useState<string | null>();
   const [hasPreferredImage, setHasPreferredImage] = useState(false);
   const [isPhotosSwitched, setisPhotosSwitched] = useState(false);
-  const [showCropper, setShowCropper] = useState();
-  const [hasNickname, setHasNickname] = useState(Boolean);
-  const [hasMaidenName, setHasMaidenName] = useState(Boolean);
+  const [showCropper, setShowCropper] = useState<string | null>();
+  const [hasNickname, setHasNickname] = useState<boolean | string>(Boolean);
+  const [hasMaidenName, setHasMaidenName] = useState<boolean | string>(Boolean);
   const [openPhotoDialog, setOpenPhotoDialog] = useState(false);
-  const [photoDialogError, setPhotoDialogError] = useState();
-  const [cropperData, setCropperData] = useState({ cropBoxDim: null, aspectRatio: null });
-  const [userProfile, setUserProfile] = useState();
-  const [currentWidth, setCurrentWidth] = useState();
-  const [cliftonColor, setCliftonColor] = useState();
+  const [photoDialogError, setPhotoDialogError] = useState<typeof photoDialogErrorTimeout>();
+  const [cropperData, setCropperData] = useState<{
+    cropBoxDim: number | undefined;
+    aspectRatio: number;
+  }>({ cropBoxDim: undefined, aspectRatio: 1 });
+  const [userProfile, setUserProfile] = useState<profileType>();
+  const [currentWidth, setCurrentWidth] = useState<string>();
+  const [cliftonColor, setCliftonColor] = useState<string>();
   const { updateImage } = useUserActions();
-  const cropperRef = useRef();
+  const cropperRef = useRef<(ReactCropperElement & HTMLImageElement) | null>(null);
   const isStudent = profile.PersonType?.includes('stu');
-  let photoDialogErrorTimeout;
+  let photoDialogErrorTimeout: string | number | NodeJS.Timeout | undefined;
 
   /**
    * Loads the given user's profile info
@@ -63,18 +81,18 @@ const Identification = ({ profile, myProf, isOnline, createSnackbar }) => {
                */
               await user.getImage(profile.AD_Username)
             : // Checks to see if the current page is the My Profile page
-            myProf
-            ? /**
-               * This case will occur only if the currently signed-in user is Non-Faculty and are
-               * on the My Profile page
-               */
-              await user.getImage()
-            : /**
-               * The requested user's image is Non-Faculty
-               * If currently signed-in user is Faculty : Will receive default and preferred image
-               * If currently signed-in user is Non-Faculty : Will receive either default or preferred image
-               */
-              await user.getImage(profile.AD_Username);
+              myProf
+              ? /**
+                 * This case will occur only if the currently signed-in user is Non-Faculty and are
+                 * on the My Profile page
+                 */
+                await user.getImage()
+              : /**
+                 * The requested user's image is Non-Faculty
+                 * If currently signed-in user is Faculty : Will receive default and preferred image
+                 * If currently signed-in user is Non-Faculty : Will receive either default or preferred image
+                 */
+                await user.getImage(profile.AD_Username);
 
         // Sets the given user's preferred image. If a default image is given but the preferred is undefined,
         // then this could mean that the currently signed-in user is not allowed to see the preferred image or
@@ -85,17 +103,21 @@ const Identification = ({ profile, myProf, isOnline, createSnackbar }) => {
         // then this, means that the currently signed-in user is not allowed to see the default picture.
         setDefaultUserImage(defaultImage);
 
-        const colorFrequencies = profile.CliftonStrengths?.Themes.reduce(
+        const colorFrequencies = profile.CliftonStrengths!.Themes.reduce(
           (colorFrequencies, strength) => ({
             ...colorFrequencies,
-            [strength.color]: (colorFrequencies[strength.color] || 0) + 1,
+            [strength.color]:
+              (colorFrequencies[strength.color as keyof typeof colorFrequencies] || 0) + 1,
           }),
           {},
         );
 
         // find max frequency by always recursively keeping a from every (a,b) where a >= b
         const cliftonColor = Object.keys(colorFrequencies).reduce((a, b) =>
-          colorFrequencies[a] >= colorFrequencies[b] ? a : b,
+          colorFrequencies[a as keyof typeof colorFrequencies] >=
+          colorFrequencies[b as keyof typeof colorFrequencies]
+            ? a
+            : b,
         );
 
         setCliftonColor(cliftonColor);
@@ -104,7 +126,7 @@ const Identification = ({ profile, myProf, isOnline, createSnackbar }) => {
       }
       setUserProfile(profile);
 
-      setIsImagePublic(profile.show_pic);
+      setIsImagePublic(profile.show_pic === 1);
 
       setHasNickname(profile?.NickName && profile.NickName !== profile.FirstName);
       setHasMaidenName(profile?.MaidenName && profile?.LastName !== profile.MaidenName);
@@ -119,7 +141,7 @@ const Identification = ({ profile, myProf, isOnline, createSnackbar }) => {
   useEffect(() => {
     if (myProf) {
       // Gets the current Material-UI Breakpoint
-      function getMaterialUIBreakpoint(width) {
+      function getMaterialUIBreakpoint(width: number) {
         let currentWidth = '';
         // If current width is in Material-UI breakpoint XS
         if (width >= windowBreakWidths.breakXS && width < windowBreakWidths.breakSM) {
@@ -145,8 +167,9 @@ const Identification = ({ profile, myProf, isOnline, createSnackbar }) => {
       }
 
       // An event listener for when the browser size changes to get the current Material-UI breakpoint
-      window.addEventListener('resize', (event) => {
-        setCurrentWidth(getMaterialUIBreakpoint(event.target.innerWidth));
+      window.addEventListener('resize', (event: UIEvent) => {
+        const w = event.target as Window;
+        setCurrentWidth(getMaterialUIBreakpoint(w.innerWidth));
       });
       // Sets the current Material-UI Breakpoint
       setCurrentWidth(getMaterialUIBreakpoint(window.innerWidth));
@@ -167,8 +190,8 @@ const Identification = ({ profile, myProf, isOnline, createSnackbar }) => {
    */
   function handleCloseSubmit() {
     if (showCropper != null) {
-      let croppedImage = cropperRef.current.cropper
-        .getCroppedCanvas({ width: CROP_DIM })
+      let croppedImage = cropperRef
+        .current!.cropper.getCroppedCanvas({ width: CROP_DIM })
         .toDataURL();
       let newImage = croppedImage.replace(/data:image\/[A-Za-z]{3,4};base64,/, '');
       let response = user.postImage(croppedImage);
@@ -222,7 +245,7 @@ const Identification = ({ profile, myProf, isOnline, createSnackbar }) => {
       .then(async () => {
         // Attempts to get the user's image since it has been reset
         try {
-          const { def: defaultImage } = await user.getImage(userProfile.AD_Username);
+          const { def: defaultImage } = await user.getImage(userProfile!.AD_Username);
           setDefaultUserImage(defaultImage);
           // Displays to the user that their photo has been restored
           createSnackbar('Original Photo Restored', 'success');
@@ -249,15 +272,16 @@ const Identification = ({ profile, myProf, isOnline, createSnackbar }) => {
    * Handles when the user chooses to hide or show their public profile picture
    */
   async function toggleImagePrivacy() {
+    const willBePublic = !isImagePublic;
     // Attempts to change the user's privacy
     let changedPrivacy = await user
-      .setImagePrivacy(isImagePublic)
+      .setImagePrivacy(willBePublic)
       .then(async () => {
         // Closes out of Photo Updater and removes any error messages
         clearPhotoDialogErrorTimeout();
         setOpenPhotoDialog(false);
         setShowCropper(null);
-        setIsImagePublic((isImagePublic + 1) % 2);
+        setIsImagePublic(willBePublic);
         return true;
       })
       .catch(() => {
@@ -283,8 +307,8 @@ const Identification = ({ profile, myProf, isOnline, createSnackbar }) => {
    */
   function clearPhotoDialogErrorTimeout() {
     clearTimeout(photoDialogErrorTimeout);
-    photoDialogErrorTimeout = null;
-    setPhotoDialogError(null);
+    photoDialogErrorTimeout = undefined;
+    setPhotoDialogError(undefined);
   }
 
   /**
@@ -293,16 +317,16 @@ const Identification = ({ profile, myProf, isOnline, createSnackbar }) => {
    * @returns {string} The message of the Photo Dialog
    */
   function createPhotoDialogBoxMessage() {
-    let message = '';
+    let message: string | JSX.Element = '';
     // If an error occured and there's no currently running timeout, the error is displayed
     // and a timeout for that error message is created
     if (photoDialogError !== null) {
-      message = <span className={styles.photoDialogError}>{photoDialogError}</span>;
+      message = <span className={styles.photoDialogError}>{photoDialogError as ReactNode}</span>;
       if (photoDialogErrorTimeout === null) {
         // Shows the error message for 6 seconds and then returns back to normal text
         photoDialogErrorTimeout = setTimeout(() => {
-          photoDialogErrorTimeout = null;
-          setPhotoDialogError(null);
+          photoDialogErrorTimeout = undefined;
+          setPhotoDialogError(undefined);
         }, 6000);
       }
     }
@@ -342,7 +366,7 @@ const Identification = ({ profile, myProf, isOnline, createSnackbar }) => {
     }
   }
 
-  function minCropBoxDim(imgWidth, dispWidth) {
+  function minCropBoxDim(imgWidth: number, dispWidth: number) {
     return (CROP_DIM * dispWidth) / imgWidth;
   }
 
@@ -351,11 +375,11 @@ const Identification = ({ profile, myProf, isOnline, createSnackbar }) => {
    *
    * @param {*} fileList The image dropped in the Dropzone of the Photo Updater
    */
-  function onDropAccepted(fileList) {
+  function onDropAccepted(fileList: any) {
     var previewImageFile = fileList[0];
     var reader = new FileReader();
     reader.onload = function () {
-      var dataURL = reader.result.toString();
+      var dataURL = reader.result!.toString();
       var i = new Image();
       i.onload = async () => {
         if (i.width < CROP_DIM || i.height < CROP_DIM) {
@@ -365,11 +389,11 @@ const Identification = ({ profile, myProf, isOnline, createSnackbar }) => {
           );
         } else {
           var aRatio = i.width / i.height;
-          setCropperData({ aspectRatio: aRatio });
+          //setCropperData({ aspectRatio: aRatio });
           var maxWidth = maxCropPreviewWidth();
           var displayWidth = maxWidth > i.width ? i.width : maxWidth;
           var cropDim = minCropBoxDim(i.width, displayWidth);
-          setPhotoDialogError(null);
+          setPhotoDialogError(undefined);
           setCropperData({ aspectRatio: aRatio, cropBoxDim: cropDim });
           setShowCropper(dataURL);
         }
@@ -387,10 +411,10 @@ const Identification = ({ profile, myProf, isOnline, createSnackbar }) => {
     setPhotoDialogError('Sorry, invalid image file! Only PNG and JPEG images are accepted.');
   }
 
-  function onCropperZoom(event) {
+  function onCropperZoom(event: Cropper.ZoomEvent<HTMLImageElement>) {
     if (event.detail.ratio > 1) {
       event.preventDefault();
-      cropperRef.current.cropper.zoomTo(1);
+      cropperRef.current!.cropper.zoomTo(1);
     }
   }
 
@@ -508,7 +532,7 @@ const Identification = ({ profile, myProf, isOnline, createSnackbar }) => {
                   onClick={handleCloseSubmit}
                   disabled={!showCropper}
                   color="primary"
-                  className={!showCropper ? styles.hiddenButton : null}
+                  className={!showCropper ? styles.hiddenButton : undefined}
                 >
                   Submit
                 </Button>
@@ -539,8 +563,8 @@ const Identification = ({ profile, myProf, isOnline, createSnackbar }) => {
                 isAprilFools
                   ? profileTitleAprilFools
                   : userProfile.NickName
-                  ? userProfile.NickName
-                  : userProfile.FirstName
+                    ? userProfile.NickName
+                    : userProfile.FirstName
               }'s Profile`}
             />
           ) : (
@@ -583,7 +607,7 @@ const Identification = ({ profile, myProf, isOnline, createSnackbar }) => {
                             cliftonColor +
                             ') border-box',
                         }
-                      : null
+                      : undefined
                   }
                 >
                   <div
@@ -601,10 +625,10 @@ const Identification = ({ profile, myProf, isOnline, createSnackbar }) => {
                           ? // Main Photo: Default
                             defaultUserImage
                           : // Main Photo: Preferred
-                          // If the given user doesn't have a preferred photo, then their default photo is shown
-                          hasPreferredImage
-                          ? preferredUserImage
-                          : defaultUserImage
+                            // If the given user doesn't have a preferred photo, then their default photo is shown
+                            hasPreferredImage
+                            ? preferredUserImage
+                            : defaultUserImage
                       }`}
                       alt="Profile"
                     />
@@ -664,7 +688,9 @@ const Identification = ({ profile, myProf, isOnline, createSnackbar }) => {
                   xs={12}
                   className={styles.identification_card_content_card_container_info_class}
                 >
-                  {userProfile.Class && <Typography>{Class[userProfile.Class]}</Typography>}
+                  {checkIsStudent(userProfile) && userProfile.Class && (
+                    <Typography>{Class[userProfile.Class]}</Typography>
+                  )}
                 </Grid>
 
                 <Grid
@@ -682,17 +708,19 @@ const Identification = ({ profile, myProf, isOnline, createSnackbar }) => {
                     }${hasMaidenName ? ` (${userProfile.MaidenName})` : ''}`}
                   </Typography>
                 </Grid>
-                {userProfile.JobTitle && userProfile.JobTitle !== '' && (
-                  <Grid
-                    item
-                    xs={12}
-                    className={styles.identification_card_content_card_container_info_job_title}
-                  >
-                    <Typography variant="h6" paragraph>
-                      {userProfile.JobTitle}
-                    </Typography>
-                  </Grid>
-                )}
+                {checkIsFacStaff(userProfile) &&
+                  userProfile.JobTitle &&
+                  userProfile.JobTitle !== '' && (
+                    <Grid
+                      item
+                      xs={12}
+                      className={styles.identification_card_content_card_container_info_job_title}
+                    >
+                      <Typography variant="h6" paragraph>
+                        {userProfile.JobTitle}
+                      </Typography>
+                    </Grid>
+                  )}
                 {userProfile.Email ? (
                   <Grid
                     item
diff --git a/src/components/Profile/components/MembershipsList/components/MembershipInfoCard/index.jsx b/src/components/Profile/components/MembershipsList/components/MembershipInfoCard/index.tsx
similarity index 83%
rename from src/components/Profile/components/MembershipsList/components/MembershipInfoCard/index.jsx
rename to src/components/Profile/components/MembershipsList/components/MembershipInfoCard/index.tsx
index 600e159dbc..86e8efcfbc 100644
--- a/src/components/Profile/components/MembershipsList/components/MembershipInfoCard/index.jsx
+++ b/src/components/Profile/components/MembershipsList/components/MembershipInfoCard/index.tsx
@@ -8,15 +8,32 @@ import {
   Accordion,
   AccordionSummary,
   AccordionDetails,
+  AlertColor,
 } from '@mui/material/';
 import useNetworkStatus from 'hooks/useNetworkStatus';
 import { Link } from 'react-router-dom';
 import styles from './MembershipInfoCard.module.css';
-import membershipService from 'services/membership';
+import membershipService, { MembershipHistory, MembershipView } from 'services/membership';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 
-const PrivacyToggle = ({ element, createSnackbar }) => {
-  const toggleMembershipPrivacy = async (element) => {
+type PrivacyProps = {
+  createSnackbar: (message: string, severity: AlertColor) => void;
+  element: MembershipView;
+};
+
+type OnlineProps = {
+  element: MembershipView;
+  children: JSX.Element | JSX.Element[];
+};
+
+type MembershipProps = {
+  myProf: boolean;
+  membershipHistory: MembershipHistory;
+  createSnackbar: (message: string, severity: AlertColor) => void;
+};
+
+const PrivacyToggle = ({ element, createSnackbar }: PrivacyProps) => {
+  const toggleMembershipPrivacy = async (element: MembershipView) => {
     try {
       const update = await membershipService.setMembershipPrivacy(
         element.MembershipID,
@@ -39,7 +56,7 @@ const PrivacyToggle = ({ element, createSnackbar }) => {
 
   return (
     <Grid container item xs={4} alignItems="center">
-      <Grid item xs={12} align="center">
+      <Grid item xs={12}>
         <Switch
           onChange={() => toggleMembershipPrivacy(element)}
           checked={!element.Privacy}
@@ -47,16 +64,16 @@ const PrivacyToggle = ({ element, createSnackbar }) => {
           color="secondary"
         />
       </Grid>
-      <Grid item xs={12} align="center">
+      <Grid item xs={12}>
         <Typography>{element.Privacy ? 'Private' : 'Public'}</Typography>
       </Grid>
     </Grid>
   );
 };
 
-const OnlineOnlyLink = ({ element, children }) => {
+const OnlineOnlyLink = ({ element, children }: OnlineProps) => {
   const isOnline = useNetworkStatus();
-  const showPrivate = element.IsInvolvementPrivate || element.Privacy;
+  const showPrivate = element.Privacy;
   if (isOnline) {
     return (
       <Link
@@ -77,7 +94,7 @@ const OnlineOnlyLink = ({ element, children }) => {
   }
 };
 
-const MembershipInfoCard = ({ myProf, membershipHistory, createSnackbar }) => {
+const MembershipInfoCard = ({ myProf, membershipHistory, createSnackbar }: MembershipProps) => {
   const isOnline = useNetworkStatus();
   return (
     <>
diff --git a/src/components/Profile/components/MembershipsList/index.jsx b/src/components/Profile/components/MembershipsList/index.tsx
similarity index 75%
rename from src/components/Profile/components/MembershipsList/index.jsx
rename to src/components/Profile/components/MembershipsList/index.tsx
index 8063310916..f229ad37d4 100644
--- a/src/components/Profile/components/MembershipsList/index.jsx
+++ b/src/components/Profile/components/MembershipsList/index.tsx
@@ -1,11 +1,27 @@
-import { Button, Card, CardContent, CardHeader, Grid, List, Typography } from '@mui/material';
+import {
+  AlertColor,
+  Button,
+  Card,
+  CardContent,
+  CardHeader,
+  Grid,
+  List,
+  Typography,
+} from '@mui/material';
 import GordonLoader from 'components/Loader';
 import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
-import membershipService from 'services/membership';
+import membershipService, { MembershipHistory } from 'services/membership';
 import MembershipInfoCard from './components/MembershipInfoCard';
 import styles from './MembershipsList.module.css';
 
+type Props = {
+  username: string;
+  myProf: boolean;
+  PersonType?: string;
+  createSnackbar: (message: string, severity: AlertColor) => void;
+};
+
 /**
  * A List of memberships for display on the Profile and MyProfile views.
  *
@@ -15,9 +31,9 @@ import styles from './MembershipsList.module.css';
  * @param {Function} props.createSnackbar function to create a snackbar of whether an operation succeeded
  * @returns {JSX} A list of the user's memberships
  */
-const MembershipsList = ({ username, myProf, createSnackbar }) => {
+const MembershipsList = ({ username, myProf, createSnackbar }: Props) => {
   const [loading, setLoading] = useState(true);
-  const [membershipHistories, setMembershipHistories] = useState([]);
+  const [membershipHistories, setMembershipHistories] = useState<MembershipHistory[]>([]);
 
   useEffect(() => {
     async function loadMemberships() {
@@ -44,14 +60,18 @@ const MembershipsList = ({ username, myProf, createSnackbar }) => {
         </Link>
       );
     } else {
-      return membershipHistories.map((membership) => (
-        <MembershipInfoCard
-          myProf={myProf}
-          membershipHistory={membership}
-          key={membership.ActivityCode}
-          createSnackbar={createSnackbar}
-        />
-      ));
+      return (
+        <>
+          {membershipHistories.map((membership) => (
+            <MembershipInfoCard
+              myProf={myProf}
+              membershipHistory={membership}
+              key={membership.ActivityCode}
+              createSnackbar={createSnackbar}
+            />
+          ))}
+        </>
+      );
     }
   };
 
@@ -69,7 +89,7 @@ const MembershipsList = ({ username, myProf, createSnackbar }) => {
     </Grid>
   );
   const noteInfo = myProf && (
-    <div align="left" className={styles.memberships_card_note}>
+    <div className={styles.memberships_card_note}>
       <Typography>
         NOTE: Shaded areas are visible only to you and other members of the same club session.
       </Typography>
diff --git a/src/components/Profile/components/OfficeInfoList/UpdateMailDestinationDialog/index.jsx b/src/components/Profile/components/OfficeInfoList/UpdateMailDestinationDialog/index.tsx
similarity index 84%
rename from src/components/Profile/components/OfficeInfoList/UpdateMailDestinationDialog/index.jsx
rename to src/components/Profile/components/OfficeInfoList/UpdateMailDestinationDialog/index.tsx
index 7e9712ee0e..779cb15f1b 100644
--- a/src/components/Profile/components/OfficeInfoList/UpdateMailDestinationDialog/index.jsx
+++ b/src/components/Profile/components/OfficeInfoList/UpdateMailDestinationDialog/index.tsx
@@ -1,16 +1,16 @@
-import { FormControl, IconButton } from '@mui/material';
+import { AlertColor, FormControl, IconButton } from '@mui/material';
 import EditIcon from '@mui/icons-material/Edit';
 import GordonDialogBox from 'components/GordonDialogBox';
 import GordonSnackbar from 'components/Snackbar';
-import { useState, useEffect } from 'react';
+import { useState, useEffect, ReactNode } from 'react';
 import userService from 'services/user';
 import SearchField from 'views/PeopleSearch/components/SearchFieldList/components/SearchField';
 
-const UpdateMail = (props) => {
+const UpdateMail = (props: { changeMailLocation: (mailStop: string) => void }) => {
   const [open, setOpen] = useState(false);
   const [mailStop, setMailStop] = useState('');
-  const [snackbar, setSnackbar] = useState({ message: '', severity: null, open: false });
-  const [mailStops, setMailStops] = useState([]);
+  const [snackbar, setSnackbar] = useState({ message: '', severity: '', open: false });
+  const [mailStops, setMailStops] = useState<string[]>([]);
 
   const handleSubmit = async () => {
     try {
@@ -43,7 +43,6 @@ const UpdateMail = (props) => {
         buttonClicked={handleSubmit}
         cancelButtonName="CANCEL"
         cancelButtonClicked={() => setOpen(false)}
-        handleSubmit
       >
         <FormControl sx={{ m: 1, minWidth: 200 }}>
           <SearchField
@@ -52,14 +51,12 @@ const UpdateMail = (props) => {
             updateValue={(event) => setMailStop(event.target.value)}
             options={mailStops}
             select
-            size={200}
-            required="required"
           />
         </FormControl>
       </GordonDialogBox>
       <GordonSnackbar
         open={snackbar.open}
-        severity={snackbar.severity}
+        severity={snackbar.severity as AlertColor}
         text={snackbar.message}
         onClose={() => setSnackbar((s) => ({ ...s, open: false }))}
       />
diff --git a/src/components/Profile/components/OfficeInfoList/UpdateOfficeHoursDialog/index.jsx b/src/components/Profile/components/OfficeInfoList/UpdateOfficeHoursDialog/index.tsx
similarity index 86%
rename from src/components/Profile/components/OfficeInfoList/UpdateOfficeHoursDialog/index.jsx
rename to src/components/Profile/components/OfficeInfoList/UpdateOfficeHoursDialog/index.tsx
index 6a7b8a6e45..0c47c210ed 100644
--- a/src/components/Profile/components/OfficeInfoList/UpdateOfficeHoursDialog/index.jsx
+++ b/src/components/Profile/components/OfficeInfoList/UpdateOfficeHoursDialog/index.tsx
@@ -1,14 +1,17 @@
-import { FormControl, IconButton, TextField } from '@mui/material';
+import { AlertColor, FormControl, IconButton, TextField } from '@mui/material';
 import EditIcon from '@mui/icons-material/Edit';
 import GordonDialogBox from 'components/GordonDialogBox';
 import GordonSnackbar from 'components/Snackbar';
 import { useState } from 'react';
 import userService from 'services/user';
 
-const UpdateOfficeHours = (props) => {
+const UpdateOfficeHours = (props: {
+  officeHours: string;
+  changeOfficeHours: (hours: string) => void;
+}) => {
   const [open, setOpen] = useState(false);
   const [hours, setHours] = useState(props.officeHours);
-  const [snackbar, setSnackbar] = useState({ message: '', severity: null, open: false });
+  const [snackbar, setSnackbar] = useState({ message: '', severity: '', open: false });
   const maxCharacter = 4000;
 
   const handleSubmit = async () => {
@@ -38,7 +41,6 @@ const UpdateOfficeHours = (props) => {
         buttonClicked={handleSubmit}
         cancelButtonName="CANCEL"
         cancelButtonClicked={() => setOpen(false)}
-        handleSubmit
       >
         <FormControl sx={{ m: 2, minWidth: 500 }}>
           <TextField
@@ -50,13 +52,13 @@ const UpdateOfficeHours = (props) => {
             value={hours}
             onChange={(event) => setHours(event.target.value)}
             inputProps={{ maxLength: maxCharacter - 1 }}
-            required="required"
+            required
           />
         </FormControl>
       </GordonDialogBox>
       <GordonSnackbar
         open={snackbar.open}
-        severity={snackbar.severity}
+        severity={snackbar.severity as AlertColor}
         text={snackbar.message}
         onClose={() => setSnackbar((s) => ({ ...s, open: false }))}
       />
diff --git a/src/components/Profile/components/OfficeInfoList/UpdateOfficeLocationDialog/index.jsx b/src/components/Profile/components/OfficeInfoList/UpdateOfficeLocationDialog/index.tsx
similarity index 85%
rename from src/components/Profile/components/OfficeInfoList/UpdateOfficeLocationDialog/index.jsx
rename to src/components/Profile/components/OfficeInfoList/UpdateOfficeLocationDialog/index.tsx
index 438b5a9b33..edc62cbd12 100644
--- a/src/components/Profile/components/OfficeInfoList/UpdateOfficeLocationDialog/index.jsx
+++ b/src/components/Profile/components/OfficeInfoList/UpdateOfficeLocationDialog/index.tsx
@@ -1,4 +1,4 @@
-import { Autocomplete, Box, IconButton, TextField } from '@mui/material';
+import { AlertColor, Autocomplete, Box, IconButton, TextField } from '@mui/material';
 import EditIcon from '@mui/icons-material/Edit';
 import GordonDialogBox from 'components/GordonDialogBox';
 import GordonSnackbar from 'components/Snackbar';
@@ -6,12 +6,17 @@ import { useState, useEffect } from 'react';
 import userService from 'services/user';
 import peopleSearchService from 'services/peopleSearch';
 
+type Building = {
+  Code: string;
+  Description: string;
+};
+
 const UpdateOffice = () => {
   const [open, setOpen] = useState(false);
   const [room, setRoom] = useState('');
-  const [building, setBuilding] = useState();
-  const [snackbar, setSnackbar] = useState({ message: '', severity: null, open: false });
-  const [buildings, setBuildings] = useState([]);
+  const [building, setBuilding] = useState('');
+  const [snackbar, setSnackbar] = useState({ message: '', severity: '', open: false });
+  const [buildings, setBuildings] = useState<Building[]>([]);
 
   useEffect(() => {
     peopleSearchService.getBuildings().then(setBuildings);
@@ -48,7 +53,6 @@ const UpdateOffice = () => {
         buttonClicked={handleSubmit}
         cancelButtonName="CANCEL"
         cancelButtonClicked={() => setOpen(false)}
-        handleSubmit
       >
         <Box
           sx={{ gap: '1rem', marginBlockStart: '1rem', display: 'flex', flexDirection: 'column' }}
@@ -57,8 +61,7 @@ const UpdateOffice = () => {
             options={buildings}
             renderInput={(params) => <TextField {...params} label="Building" />}
             getOptionLabel={(option) => option.Description}
-            onChange={(_event, value) => setBuilding(value.Code)}
-            required
+            onChange={(_event, value) => setBuilding(value!.Code)}
           />
           <TextField
             label="Room"
@@ -70,7 +73,7 @@ const UpdateOffice = () => {
       </GordonDialogBox>
       <GordonSnackbar
         open={snackbar.open}
-        severity={snackbar.severity}
+        severity={snackbar.severity as AlertColor}
         text={snackbar.message}
         onClose={() => setSnackbar((s) => ({ ...s, open: false }))}
       />
diff --git a/src/components/Profile/components/OfficeInfoList/index.jsx b/src/components/Profile/components/OfficeInfoList/index.tsx
similarity index 82%
rename from src/components/Profile/components/OfficeInfoList/index.jsx
rename to src/components/Profile/components/OfficeInfoList/index.tsx
index 81712a6ab5..fe343f5e44 100644
--- a/src/components/Profile/components/OfficeInfoList/index.jsx
+++ b/src/components/Profile/components/OfficeInfoList/index.tsx
@@ -1,11 +1,28 @@
-import { useState } from 'react';
-import { Card, CardContent, CardHeader, Grid, List, Typography } from '@mui/material';
+import { useState, Fragment, useEffect, Children, ReactElement } from 'react';
+import { Card, CardContent, CardHeader, Grid, List, Typography, IconButton } from '@mui/material';
 import ProfileInfoListItem from '../ProfileInfoListItem';
 import styles from './OfficeInfoList.module.css';
 import UpdateOffice from './UpdateOfficeLocationDialog';
 import UpdateOfficeHours from './UpdateOfficeHoursDialog';
 import UpdateMail from './UpdateMailDestinationDialog';
 import GordonTooltip from 'components/GordonTooltip';
+import user from 'services/user';
+import EditIcon from '@mui/icons-material/Edit';
+import { SignalWifiStatusbarConnectedNoInternet4TwoTone } from '@mui/icons-material';
+
+type Props = {
+  myProf: boolean;
+  profile: {
+    BuildingDescription: string;
+    OnCampusDepartment: string;
+    OnCampusRoom: string;
+    OnCampusPhone: string;
+    PersonType: string;
+    office_hours: string;
+    Mail_Location: string;
+    Mail_Description: string;
+  };
+};
 
 const OfficeInfoList = ({
   myProf,
@@ -19,7 +36,7 @@ const OfficeInfoList = ({
     Mail_Location,
     Mail_Description,
   },
-}) => {
+}: Props) => {
   const [profOfficeHours, setProfOfficeHours] = useState(office_hours);
   const [profMailLocation, setProfMailLocation] = useState(Mail_Location);
 
@@ -103,8 +120,8 @@ const OfficeInfoList = ({
             <Typography>
               {profMailLocation ? profMailLocation : 'Add your mail location here'}
               {Mail_Description && (
-                <GordonTooltip enterTouchDelay={50} leaveTouchDelay={2000}>
-                  {Mail_Description}
+                <GordonTooltip title={''} enterTouchDelay={50} leaveTouchDelay={2000}>
+                  <>{Mail_Description}</>
                 </GordonTooltip>
               )}
             </Typography>
diff --git a/src/components/Profile/components/PersonalInfoList/components/AlumniUpdateForm/components/ConfirmationHeader/index.jsx b/src/components/Profile/components/PersonalInfoList/components/AlumniUpdateForm/components/ConfirmationHeader/index.tsx
similarity index 100%
rename from src/components/Profile/components/PersonalInfoList/components/AlumniUpdateForm/components/ConfirmationHeader/index.jsx
rename to src/components/Profile/components/PersonalInfoList/components/AlumniUpdateForm/components/ConfirmationHeader/index.tsx
diff --git a/src/components/Profile/components/PersonalInfoList/components/AlumniUpdateForm/components/ConfirmationRow/index.jsx b/src/components/Profile/components/PersonalInfoList/components/AlumniUpdateForm/components/ConfirmationRow/index.tsx
similarity index 55%
rename from src/components/Profile/components/PersonalInfoList/components/AlumniUpdateForm/components/ConfirmationRow/index.jsx
rename to src/components/Profile/components/PersonalInfoList/components/AlumniUpdateForm/components/ConfirmationRow/index.tsx
index 930bb361d1..f6739003d4 100644
--- a/src/components/Profile/components/PersonalInfoList/components/AlumniUpdateForm/components/ConfirmationRow/index.jsx
+++ b/src/components/Profile/components/PersonalInfoList/components/AlumniUpdateForm/components/ConfirmationRow/index.tsx
@@ -2,30 +2,36 @@ import { Typography, Grid } from '@mui/material/';
 import styles from './ConfirmationRow.module.css';
 import { Check, Remove } from '@mui/icons-material';
 
-const ConfirmationRow = ({ field, prevValue }) => {
-  const isCheckbox = typeof prevValue === 'boolean';
-  const truthIcon = (value) => {
+type Props = {
+  field: { Value: string | boolean; Label: string };
+  prevValue: string | boolean;
+};
+
+const ConfirmationRow = ({ field, prevValue }: Props) => {
+  const truthIcon = (value: boolean) => {
     return value ? (
       <Check className={styles.icon_current} />
     ) : (
       <Remove className={styles.icon_previous} />
     );
   };
-  const currentValue = isCheckbox ? (
-    truthIcon(field.Value)
-  ) : (
-    <Typography variant="subtitle2" className={styles.text_current}>
-      {`${field.Value}`}
-    </Typography>
-  );
+  const currentValue =
+    typeof field.Value === 'boolean' ? (
+      truthIcon(field.Value)
+    ) : (
+      <Typography variant="subtitle2" className={styles.text_current}>
+        {field.Value}
+      </Typography>
+    );
 
-  const previousValue = isCheckbox ? (
-    truthIcon(prevValue)
-  ) : (
-    <Typography variant="caption" className={styles.text_previous}>
-      {prevValue === '' || false ? 'No previous value' : `${prevValue}`}
-    </Typography>
-  );
+  const previousValue =
+    typeof prevValue === 'boolean' ? (
+      truthIcon(prevValue)
+    ) : (
+      <Typography variant="caption" className={styles.text_previous}>
+        {prevValue === '' || false ? 'No previous value' : prevValue}
+      </Typography>
+    );
 
   return (
     <Grid
diff --git a/src/components/Profile/components/PersonalInfoList/components/AlumniUpdateForm/components/ContentCard/index.jsx b/src/components/Profile/components/PersonalInfoList/components/AlumniUpdateForm/components/ContentCard/index.tsx
similarity index 77%
rename from src/components/Profile/components/PersonalInfoList/components/AlumniUpdateForm/components/ContentCard/index.jsx
rename to src/components/Profile/components/PersonalInfoList/components/AlumniUpdateForm/components/ContentCard/index.tsx
index eb274bb30a..c05eca6957 100644
--- a/src/components/Profile/components/PersonalInfoList/components/AlumniUpdateForm/components/ContentCard/index.jsx
+++ b/src/components/Profile/components/PersonalInfoList/components/AlumniUpdateForm/components/ContentCard/index.tsx
@@ -1,7 +1,8 @@
 import { Grid, Card, CardContent, CardHeader } from '@mui/material/';
 import styles from './ContentCard.module.css';
+import { ReactNode } from 'react';
 
-const ContentCard = (props) => {
+const ContentCard = (props: { title?: string; children: ReactNode }) => {
   return (
     <Card>
       <CardHeader className={styles.update_header} title={props.title} />
diff --git a/src/components/Profile/components/PersonalInfoList/components/AlumniUpdateForm/components/ProfileUpdateField/index.jsx b/src/components/Profile/components/PersonalInfoList/components/AlumniUpdateForm/components/ProfileUpdateField/index.tsx
similarity index 69%
rename from src/components/Profile/components/PersonalInfoList/components/AlumniUpdateForm/components/ProfileUpdateField/index.jsx
rename to src/components/Profile/components/PersonalInfoList/components/AlumniUpdateForm/components/ProfileUpdateField/index.tsx
index 0b2d4bcbe1..27368fb2ab 100644
--- a/src/components/Profile/components/PersonalInfoList/components/AlumniUpdateForm/components/ProfileUpdateField/index.jsx
+++ b/src/components/Profile/components/PersonalInfoList/components/AlumniUpdateForm/components/ProfileUpdateField/index.tsx
@@ -6,10 +6,35 @@ import {
   InputLabel,
   MenuItem,
   Select,
+  SelectChangeEvent,
   TextField,
 } from '@mui/material/';
+import { ChangeEvent, ReactNode } from 'react';
 import styles from './ProfileUpdateField.module.css';
 
+type defaultProps = {
+  label: string;
+  name: string;
+  value: any;
+  helperText?: ReactNode;
+  menuItems?: string[];
+  error?: boolean;
+};
+
+export type ProfileUpdateFieldProps = defaultProps &
+  (
+    | {
+        type: 'text' | 'checkbox';
+        menuItems?: undefined;
+        onChange: (event: ChangeEvent<HTMLInputElement>, child?: ReactNode) => void;
+      }
+    | {
+        type: 'select';
+        menuItems: string[];
+        onChange: (event: SelectChangeEvent<string>, child?: ReactNode) => void;
+      }
+  );
+
 const ProfileUpdateField = ({
   label,
   name,
@@ -19,7 +44,7 @@ const ProfileUpdateField = ({
   error,
   helperText,
   menuItems,
-}) => {
+}: ProfileUpdateFieldProps) => {
   let field;
   // eslint-disable-next-line default-case
   switch (type) {
@@ -52,7 +77,7 @@ const ProfileUpdateField = ({
         <FormControl variant="filled" className={`${styles.select_text} ${styles.field}`}>
           <InputLabel>{label}</InputLabel>
           <Select label={label} name={name} value={value} onChange={onChange}>
-            {menuItems.map((item) => (
+            {menuItems!.map((item: string) => (
               <MenuItem className={styles.select_text} value={item}>
                 {item}
               </MenuItem>
diff --git a/src/components/Profile/components/PersonalInfoList/components/AlumniUpdateForm/index.jsx b/src/components/Profile/components/PersonalInfoList/components/AlumniUpdateForm/index.tsx
similarity index 58%
rename from src/components/Profile/components/PersonalInfoList/components/AlumniUpdateForm/index.jsx
rename to src/components/Profile/components/PersonalInfoList/components/AlumniUpdateForm/index.tsx
index 191fddd9a9..ffe0c4ecc4 100644
--- a/src/components/Profile/components/PersonalInfoList/components/AlumniUpdateForm/index.jsx
+++ b/src/components/Profile/components/PersonalInfoList/components/AlumniUpdateForm/index.tsx
@@ -1,24 +1,47 @@
-import { Typography, Grid, Button, TextField, Box } from '@mui/material/';
-import { useState, useMemo, useEffect } from 'react';
-import styles from './AlumniUpdateForm.module.css';
+import {
+  Typography,
+  Grid,
+  Button,
+  TextField,
+  Box,
+  SelectChangeEvent,
+  AlertColor,
+} from '@mui/material/';
+import React, { useState, useMemo, useEffect } from 'react';
+import { Profile as profileType } from 'services/user';
 import GordonLoader from 'components/Loader';
 import GordonDialogBox from 'components/GordonDialogBox';
 import { ConfirmationRow } from './components/ConfirmationRow';
 import { ConfirmationWindowHeader } from './components/ConfirmationHeader';
 import { ContentCard } from './components/ContentCard';
-import { ProfileUpdateField } from './components/ProfileUpdateField';
+import { ProfileUpdateField, ProfileUpdateFieldProps } from './components/ProfileUpdateField';
 import addressService from 'services/address';
-import { map } from 'services/utils';
+import { ArrayElement, DistributiveOmit, map } from 'services/utils';
 import userService from 'services/user';
 
+type ProfileUpdateFieldType = DistributiveOmit<ProfileUpdateFieldProps, 'onChange' | 'value'>;
+
+const INPUT_TYPES = {
+  Text: 'text',
+  Checkbox: 'checkbox',
+  Select: 'select',
+} as const;
+
 const shouldContactFields = [
-  { label: 'Do Not Contact', name: 'doNotContact', type: 'checkbox' },
-  { label: 'Do Not Mail', name: 'doNotMail', type: 'checkbox' },
+  { label: 'Do Not Contact', name: 'doNotContact', type: INPUT_TYPES.Checkbox },
+  { label: 'Do Not Mail', name: 'doNotMail', type: INPUT_TYPES.Checkbox },
 ];
 
 const UPDATE_STEP = 'update';
 const CONFIRM_STEP = 'confirm';
 
+type Props = {
+  profile: profileType;
+  closeWithSnackbar: (status: { type: AlertColor; message: string }) => void;
+  openAlumniUpdateForm: boolean;
+  setOpenAlumniUpdateForm: (bool: boolean) => void;
+};
+
 /**
  * A form for alumni to request an update to their profile information.
  */
@@ -28,7 +51,7 @@ const AlumniUpdateForm = ({
   closeWithSnackbar,
   openAlumniUpdateForm,
   setOpenAlumniUpdateForm,
-}) => {
+}: Props) => {
   const [statesAndProv, setStatesAndProv] = useState(['Not Applicable']);
   const [countries, setCountries] = useState(['Prefer Not to Say']);
   const [errorStatus, setErrorStatus] = useState({
@@ -44,58 +67,58 @@ const AlumniUpdateForm = ({
     aEmail: false,
   });
 
-  const personalInfoFields = [
+  const personalInfoFields: ProfileUpdateFieldType[] = [
     {
       label: 'Salutation',
       name: 'salutation',
-      type: 'select',
+      type: INPUT_TYPES.Select,
       menuItems: ['Prefer Not to Answer', 'Mr.', 'Ms.', 'Mrs.', 'Miss', 'Dr.', 'Rev.'],
     },
     {
       label: 'First Name',
       name: 'firstName',
-      type: 'text',
+      type: INPUT_TYPES.Text,
       error: errorStatus.firstName,
       helperText: '*Required',
     },
     {
       label: 'Last Name',
       name: 'lastName',
-      type: 'text',
+      type: INPUT_TYPES.Text,
       error: errorStatus.lastName,
       helperText: '*Required',
     },
-    { label: 'Middle Name', name: 'middleName', type: 'text' },
-    { label: 'Preferred Name', name: 'nickName', type: 'text' },
-    { label: 'Suffix', name: 'suffix', type: 'text' },
-    { label: 'Married', name: 'married', type: 'checkbox' },
+    { label: 'Middle Name', name: 'middleName', type: INPUT_TYPES.Text },
+    { label: 'Preferred Name', name: 'nickName', type: INPUT_TYPES.Text },
+    { label: 'Suffix', name: 'suffix', type: INPUT_TYPES.Text },
+    { label: 'Married', name: 'married', type: INPUT_TYPES.Checkbox },
   ];
   const emailInfoFields = [
     {
       label: 'Personal Email',
       name: 'personalEmail',
-      type: 'text',
+      type: INPUT_TYPES.Text,
       error: errorStatus.personalEmail,
       helperText: '*Invalid Email',
     },
     {
       label: 'Work Email',
       name: 'workEmail',
-      type: 'text',
+      type: INPUT_TYPES.Text,
       error: errorStatus.workEmail,
       helperText: '*Invalid Email',
     },
     {
       label: 'Alternate Email',
       name: 'aEmail',
-      type: 'text',
+      type: INPUT_TYPES.Text,
       error: errorStatus.aEmail,
       helperText: '*Invalid Email',
     },
     {
       label: 'Preferred Email',
       name: 'preferredEmail',
-      type: 'select',
+      type: INPUT_TYPES.Select,
       menuItems: ['No Preference', 'Personal Email', 'Work Email', 'Alternate Email'],
     },
   ];
@@ -103,38 +126,38 @@ const AlumniUpdateForm = ({
     {
       label: 'Home Phone',
       name: 'homePhone',
-      type: 'text',
+      type: INPUT_TYPES.Text,
       error: errorStatus.homePhone,
       helperText: '*Invalid Number',
     },
     {
       label: 'Work Phone',
       name: 'workPhone',
-      type: 'text',
+      type: INPUT_TYPES.Text,
       error: errorStatus.workPhone,
       helperText: '*Invalid Number',
     },
     {
       label: 'Mobile Phone',
       name: 'mobilePhone',
-      type: 'text',
+      type: INPUT_TYPES.Text,
       error: errorStatus.mobilePhone,
       helperText: '*Invalid Number',
     },
     {
       label: 'Preferred Phone',
       name: 'preferredPhone',
-      type: 'select',
+      type: INPUT_TYPES.Select,
       menuItems: ['No Preference', 'Home Phone', 'Work Phone', 'Mobile Phone'],
     },
   ];
   const mailingInfoFields = [
-    { label: 'Address', name: 'address1', type: 'text' },
-    { label: 'Address Line 2 (optional)', name: 'address2', type: 'text' },
-    { label: 'City', name: 'city', type: 'text' },
-    { label: 'State', name: 'state', type: 'select', menuItems: statesAndProv },
-    { label: 'Zip Code', name: 'zip', type: 'text' },
-    { label: 'Country', name: 'country', type: 'select', menuItems: countries },
+    { label: 'Address', name: 'address1', type: INPUT_TYPES.Text },
+    { label: 'Address Line 2 (optional)', name: 'address2', type: INPUT_TYPES.Text },
+    { label: 'City', name: 'city', type: INPUT_TYPES.Text },
+    { label: 'State', name: 'state', type: INPUT_TYPES.Select, menuItems: statesAndProv },
+    { label: 'Zip Code', name: 'zip', type: INPUT_TYPES.Text },
+    { label: 'Country', name: 'country', type: INPUT_TYPES.Select, menuItems: countries },
   ];
 
   const allFields = [
@@ -157,7 +180,33 @@ const AlumniUpdateForm = ({
       .then(setCountries);
   }, []);
 
-  const currentInfo = useMemo(() => {
+  type Info = {
+    salutation?: string;
+    firstName?: string;
+    lastName?: string;
+    middleName?: string;
+    nickName?: string;
+    suffix?: string;
+    personalEmail?: string;
+    workEmail?: string;
+    aEmail?: string;
+    preferredEmail?: string;
+    doNotContact?: boolean;
+    doNotMail?: boolean;
+    homePhone?: string;
+    workPhone?: string;
+    mobilePhone?: string;
+    preferredPhone?: string;
+    address1?: string;
+    address2?: string;
+    city?: string;
+    state?: string;
+    zip?: string;
+    country?: string;
+    married?: boolean;
+  };
+
+  const currentInfo = useMemo<Info>(() => {
     return {
       salutation: profile.Title
         ? profile.Title.charAt(0).toUpperCase() + profile.Title.slice(1).toLowerCase()
@@ -193,91 +242,97 @@ const AlumniUpdateForm = ({
   const [changeReason, setChangeReason] = useState('');
   const [disableUpdateButton, setDisableUpdateButton] = useState(true);
 
-  const handleSetError = (field, condition) => {
-    const getCurrentErrorStatus = (currentValue) => {
-      return {
-        ...currentValue,
-        [field]: condition,
-      };
-    };
-    setErrorStatus(getCurrentErrorStatus);
-  };
-
-  const isEmailValid = (email) => {
+  const isEmailValid = (email?: string) => {
     //email regex from: https://stackoverflow.com/a/72476905
     const regex = /[a-zA-Z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,8}(.[a-z{2,8}])?/g;
     return !email || email === '' || regex.test(email);
   };
 
-  const isPhoneValid = (phoneNum) => {
+  const isPhoneValid = (phoneNum?: string) => {
     /**
      * 2 Regex's used here:
      * /[-()\s]/g => /g is a global search for all characters in the array symbols -,(,),(space)
      * /^[+]?\d{7,15}+$/ => regex match value of (begin char)(0 or 1 instance of '+')(7-15 digits)(end char)
      */
-    let value = phoneNum.replace(/[-()\s]/g, '');
-    return /^[+]?\d{7,15}$/.test(value) || phoneNum.length === 0;
+    let value = phoneNum!.replace(/[-()\s]/g, '');
+    return /^[+]?\d{7,15}$/.test(value) || phoneNum!.length === 0;
   };
 
   // Field Validation
   useEffect(() => {
     let hasError = false;
     let hasChanges = false;
-    for (const field in currentInfo) {
-      if (currentInfo[field] !== updatedInfo[field]) {
+    Object.keys(currentInfo).forEach((field) => {
+      if (currentInfo[field as keyof Info] !== updatedInfo[field as keyof Info]) {
         hasChanges = true;
       }
       switch (field) {
         case 'firstName':
         case 'lastName':
-          handleSetError(field, updatedInfo[field] === '');
+          setErrorStatus((currentValue) => ({
+            ...currentValue,
+            [field]: updatedInfo[field] === '',
+          }));
           hasError = updatedInfo[field] === '' || hasError;
           break;
         case 'homePhone':
         case 'workPhone':
         case 'mobilePhone':
-          handleSetError(field, !isPhoneValid(updatedInfo[field]));
+          setErrorStatus((currentValue) => ({
+            ...currentValue,
+            [field]: !isPhoneValid(updatedInfo[field]),
+          }));
           hasError = !isPhoneValid(updatedInfo[field]) || hasError;
           break;
         case 'personalEmail':
         case 'workEmail':
         case 'aEmail':
-          handleSetError(field, !isEmailValid(updatedInfo[field]));
+          setErrorStatus((currentValue) => ({
+            ...currentValue,
+            [field]: !isEmailValid(updatedInfo[field]),
+          }));
           hasError = !isEmailValid(updatedInfo[field]) || hasError;
           break;
         default:
           break;
       }
-    }
+    });
     setDisableUpdateButton(hasError || !hasChanges);
   }, [updatedInfo, currentInfo]);
 
-  const handleChange = (event) => {
-    const getNewInfo = (currentValue) => {
+  const handleChange = (event: SelectChangeEvent<string>) => {
+    const getNewInfo = (currentValue: Info) => {
+      let value: string | boolean;
+      if ('type' in event.target && event.target.type === 'checkbox') {
+        value = event.target.checked;
+      } else {
+        value = event.target.value;
+      }
       return {
         ...currentValue,
-        [event.target.name]:
-          event.target.type === 'checkbox' ? event.target.checked : event.target.value,
+        [event.target.name]: value,
       };
     };
     setUpdatedInfo(getNewInfo);
   };
 
-  const getFieldLabel = (fieldName) => {
+  const getFieldLabel = (fieldName: string): string => {
     const matchingField = allFields.find((field) => field.name === fieldName);
-    return matchingField.label;
+    return matchingField!.label;
   };
 
-  function getUpdatedFields(updatedInfo, currentInfo) {
-    const updatedFields = [];
-    Object.entries(currentInfo).forEach(([field, value]) => {
+  function getUpdatedFields(updatedInfo: Info) {
+    const updatedFields: { Field: keyof Info; Value: string | boolean; Label: string }[] = [];
+    Object.entries(updatedInfo).forEach(([field, value]) => {
       let updatedValue = value;
       if (field === 'homePhone' || field === 'workPhone' || field === 'mobilePhone') {
-        updatedValue = value.replace(/[-()\s]/g, '');
+        if (typeof value === 'string') {
+          updatedValue = value.replace(/[-()\s]/g, '');
+        }
       }
-      if (updatedInfo[field] !== value)
+      if (field !== value)
         updatedFields.push({
-          Field: field,
+          Field: field as keyof Info,
           Value: updatedValue,
           Label: getFieldLabel(field),
         });
@@ -287,12 +342,16 @@ const AlumniUpdateForm = ({
 
   const handleConfirm = () => {
     setSaving(true);
-    let updateRequest = getUpdatedFields(currentInfo, updatedInfo);
+    const updateRequest: Array<
+      | ArrayElement<ReturnType<typeof getUpdatedFields>>
+      | { Field: 'changeReason'; Value: string; Label: string }
+    > = getUpdatedFields(updatedInfo);
     updateRequest.push({
       Field: 'changeReason',
       Value: changeReason,
       Label: 'Reason for change',
     });
+
     userService.requestInfoUpdate(updateRequest).then(() => {
       setSaving(false);
       closeWithSnackbar({
@@ -308,33 +367,14 @@ const AlumniUpdateForm = ({
     setChangeReason('');
   };
 
-  /**
-   * @param {Array<{name: string, label: string, type: string, menuItems: string[]}>} fields array of objects defining the properties of the input field
-   * @returns JSX correct input for each field based on type
-   */
-  const mapFieldsToInputs = (fields) => {
-    return fields.map((field) => (
-      <ProfileUpdateField
-        error={field.error}
-        label={field.label}
-        name={field.name}
-        helperText={field.helperText}
-        value={updatedInfo[field.name]}
-        type={field.type}
-        menuItems={field.menuItems}
-        onChange={handleChange}
-      />
-    ));
-  };
-
   const dialogProps =
     step === CONFIRM_STEP
       ? {
           title: 'Confirm Your Updates',
-          buttonClicked: !isSaving ? handleConfirm : null,
+          buttonClicked: !isSaving ? handleConfirm : undefined,
           buttonName: 'Confirm',
           isButtonDisabled: changeReason === '',
-          cancelButtonClicked: !isSaving ? handleWindowClose : null,
+          cancelButtonClicked: !isSaving ? handleWindowClose : undefined,
         }
       : {
           title: 'Update Information',
@@ -349,24 +389,59 @@ const AlumniUpdateForm = ({
 
   return (
     <GordonDialogBox
+      {...dialogProps}
       open={openAlumniUpdateForm}
       fullWidth
       maxWidth="lg"
       isButtonDisabled={disableUpdateButton}
       cancelButtonName="Cancel"
-      titleClass={styles.alumni_update_form_title}
-      {...dialogProps}
     >
       {step === UPDATE_STEP && (
         <Box sx={{ display: 'flex', flexDirection: 'column', gap: '1rem', marginTop: '1rem' }}>
           <ContentCard title="Personal Information">
-            {mapFieldsToInputs(personalInfoFields)}
+            {personalInfoFields.map((field) => (
+              <ProfileUpdateField
+                {...field}
+                value={updatedInfo[field.name as keyof Info]}
+                onChange={handleChange}
+              />
+            ))}
+          </ContentCard>
+          <ContentCard title="Email Addresses">
+            {emailInfoFields.map((field) => (
+              <ProfileUpdateField
+                {...field}
+                value={updatedInfo[field.name as keyof Info]}
+                onChange={handleChange}
+              />
+            ))}
+          </ContentCard>
+          <ContentCard title="Phone Numbers">
+            {phoneInfoFields.map((field) => (
+              <ProfileUpdateField
+                {...field}
+                value={updatedInfo[field.name as keyof Info]}
+                onChange={handleChange}
+              />
+            ))}
+          </ContentCard>
+          <ContentCard title="Mailing Address">
+            {mailingInfoFields.map((field) => (
+              <ProfileUpdateField
+                {...field}
+                value={updatedInfo[field.name as keyof Info]}
+                onChange={handleChange}
+              />
+            ))}
           </ContentCard>
-          <ContentCard title="Email Addresses">{mapFieldsToInputs(emailInfoFields)}</ContentCard>
-          <ContentCard title="Phone Numbers">{mapFieldsToInputs(phoneInfoFields)}</ContentCard>
-          <ContentCard title="Mailing Address">{mapFieldsToInputs(mailingInfoFields)}</ContentCard>
           <ContentCard title="Contact Preferences">
-            {mapFieldsToInputs(shouldContactFields)}
+            {shouldContactFields.map((field) => (
+              <ProfileUpdateField
+                {...field}
+                value={updatedInfo[field.name as keyof Info]}
+                onChange={handleChange}
+              />
+            ))}
           </ContentCard>
           <Typography variant="subtitle1">
             Found a bug?
@@ -380,8 +455,11 @@ const AlumniUpdateForm = ({
         <>
           <ConfirmationWindowHeader />
           <Grid container>
-            {getUpdatedFields(currentInfo, updatedInfo).map((field) => (
-              <ConfirmationRow field={field} prevValue={currentInfo[field.Field]} />
+            {getUpdatedFields(updatedInfo).map((field) => (
+              <ConfirmationRow
+                field={field}
+                prevValue={currentInfo[field.Field] as string | boolean}
+              />
             ))}
           </Grid>
           <TextField
diff --git a/src/components/Profile/components/PersonalInfoList/components/UpdatePhoneDialog/index.jsx b/src/components/Profile/components/PersonalInfoList/components/UpdatePhoneDialog/index.tsx
similarity index 75%
rename from src/components/Profile/components/PersonalInfoList/components/UpdatePhoneDialog/index.jsx
rename to src/components/Profile/components/PersonalInfoList/components/UpdatePhoneDialog/index.tsx
index 00d054ee8f..b8e185b745 100644
--- a/src/components/Profile/components/PersonalInfoList/components/UpdatePhoneDialog/index.jsx
+++ b/src/components/Profile/components/PersonalInfoList/components/UpdatePhoneDialog/index.tsx
@@ -1,4 +1,11 @@
-import { FormControl, IconButton, Input, InputLabel } from '@mui/material';
+import {
+  AlertColor,
+  FormControl,
+  IconButton,
+  Input,
+  InputLabel,
+  InputBaseComponentProps,
+} from '@mui/material';
 import EditIcon from '@mui/icons-material/Edit';
 import GordonDialogBox from 'components/GordonDialogBox';
 import GordonSnackbar from 'components/Snackbar';
@@ -10,7 +17,7 @@ import styles from './UpdatePhone.module.css';
 const UpdatePhone = () => {
   const [open, setOpen] = useState(false);
   const [mobilePhoneNumber, setMobilePhoneNumber] = useState('');
-  const [snackbar, setSnackbar] = useState({ message: '', severity: null, open: false });
+  const [snackbar, setSnackbar] = useState({ message: '', severity: '', open: false });
 
   const handleSubmit = async () => {
     try {
@@ -22,7 +29,7 @@ const UpdatePhone = () => {
     setOpen(false);
   };
 
-  const createSnackbar = (message, severity) => {
+  const createSnackbar = (message: string, severity: AlertColor) => {
     setSnackbar({ message, severity, open: true });
   };
 
@@ -55,14 +62,14 @@ const UpdatePhone = () => {
             value={mobilePhoneNumber}
             onChange={(event) => setMobilePhoneNumber(event.target.value)}
             inputComponent={phoneMaskUS}
-            required="required"
+            required
             autoFocus
           />
         </FormControl>
       </GordonDialogBox>
       <GordonSnackbar
         open={snackbar.open}
-        severity={snackbar.severity}
+        severity={snackbar.severity as AlertColor}
         text={snackbar.message}
         onClose={() => setSnackbar((s) => ({ ...s, open: false }))}
       />
@@ -72,20 +79,28 @@ const UpdatePhone = () => {
 
 // From material ui website
 // https://material-ui.com/components/text-fields/#integration-with-3rd-party-input-libraries
-const phoneMaskUS = forwardRef((props, ref) => {
-  const { onChange, ...other } = props;
+const phoneMaskUS = forwardRef(
+  (
+    props: {
+      onChange: (name: string | undefined, value: string) => void;
+      name?: string;
+    } & InputBaseComponentProps,
+    ref,
+  ) => {
+    const { onChange, ...other } = props;
 
-  return (
-    <IMaskInput
-      {...other}
-      ref={ref}
-      mask="(000) 000-0000"
-      placeholderChar={'\u2000'}
-      unmask={true}
-      onAccept={(value) => onChange({ target: { name: props.name, value } })}
-      overwrite
-    />
-  );
-});
+    return (
+      <IMaskInput
+        {...other}
+        ref={ref}
+        mask="(000) 000-0000"
+        placeholderChar={'\u2000'}
+        unmask={true}
+        onAccept={(value) => onChange(props.name, value)}
+        overwrite
+      />
+    );
+  },
+);
 
 export default UpdatePhone;
diff --git a/src/components/Profile/components/PersonalInfoList/components/UpdatePlannedGraduationYear/index.jsx b/src/components/Profile/components/PersonalInfoList/components/UpdatePlannedGraduationYear/index.tsx
similarity index 88%
rename from src/components/Profile/components/PersonalInfoList/components/UpdatePlannedGraduationYear/index.jsx
rename to src/components/Profile/components/PersonalInfoList/components/UpdatePlannedGraduationYear/index.tsx
index 7613d74145..eafcdba21a 100644
--- a/src/components/Profile/components/PersonalInfoList/components/UpdatePlannedGraduationYear/index.jsx
+++ b/src/components/Profile/components/PersonalInfoList/components/UpdatePlannedGraduationYear/index.tsx
@@ -1,4 +1,4 @@
-import { FormControl, IconButton, Link } from '@mui/material';
+import { AlertColor, FormControl, IconButton, Link } from '@mui/material';
 import EditIcon from '@mui/icons-material/Edit';
 import GordonDialogBox from 'components/GordonDialogBox';
 import GordonSnackbar from 'components/Snackbar';
@@ -7,10 +7,12 @@ import userService from 'services/user';
 import SearchField from 'views/PeopleSearch/components/SearchFieldList/components/SearchField';
 import styles from './UpdatePlannedGradYear.module.css';
 
-const UpdatePlannedGraduationYear = (props) => {
+const UpdatePlannedGraduationYear = (props: {
+  change: (plannedGraduationYear: string) => void;
+}) => {
   const [open, setOpen] = useState(false);
   const [plannedGraduationYear, setPlannedGraduationYear] = useState('');
-  const [snackbar, setSnackbar] = useState({ message: '', severity: null, open: false });
+  const [snackbar, setSnackbar] = useState({ message: '', severity: '', open: false });
   const currentYear = new Date().getFullYear();
 
   const handleSubmit = async () => {
@@ -23,7 +25,7 @@ const UpdatePlannedGraduationYear = (props) => {
     setOpen(false);
   };
 
-  const createSnackbar = (message, severity) => {
+  const createSnackbar = (message: string, severity: string) => {
     setSnackbar({ message, severity, open: true });
   };
 
@@ -45,7 +47,7 @@ const UpdatePlannedGraduationYear = (props) => {
         buttonClicked={handleSubmit}
         cancelButtonName="CANCEL"
         cancelButtonClicked={() => setOpen(false)}
-        sx={12}
+        sx={{ fontsize: 12 }}
       >
         <FormControl sx={{ m: 1, minWidth: 300 }}>
           <SearchField
@@ -58,8 +60,6 @@ const UpdatePlannedGraduationYear = (props) => {
               label: (currentYear + i).toString(),
             }))}
             select
-            required="required"
-            autoFocus
           />
         </FormControl>
         <p className={styles.note}>
@@ -73,7 +73,7 @@ const UpdatePlannedGraduationYear = (props) => {
       </GordonDialogBox>
       <GordonSnackbar
         open={snackbar.open}
-        severity={snackbar.severity}
+        severity={snackbar.severity as AlertColor}
         text={snackbar.message}
         onClose={() => setSnackbar((s) => ({ ...s, open: false }))}
       />
diff --git a/src/components/Profile/components/PersonalInfoList/index.jsx b/src/components/Profile/components/PersonalInfoList/index.tsx
similarity index 89%
rename from src/components/Profile/components/PersonalInfoList/index.jsx
rename to src/components/Profile/components/PersonalInfoList/index.tsx
index 2fae0937c1..52b8132bfd 100644
--- a/src/components/Profile/components/PersonalInfoList/index.jsx
+++ b/src/components/Profile/components/PersonalInfoList/index.tsx
@@ -1,4 +1,5 @@
 import {
+  AlertColor,
   Card,
   CardContent,
   CardHeader,
@@ -22,6 +23,13 @@ import { useEffect, useState } from 'react';
 import { AuthGroup } from 'services/auth';
 import userService from 'services/user';
 import ProfileInfoListItem from '../ProfileInfoListItem';
+import {
+  Profile as profileType,
+  StudentAdvisorInfo as AdvisorType,
+  isStudent as checkIsStudent,
+  isFacStaff as checkIsFacStaff,
+  isAlumni as checkIsAlumni,
+} from 'services/user';
 import UpdatePhone from './components/UpdatePhoneDialog';
 import UpdatePlannedGraduationYear from './components/UpdatePlannedGraduationYear';
 import styles from './PersonalInfoList.module.css';
@@ -33,7 +41,7 @@ import DDLock from './DandD.png';
 
 const PRIVATE_INFO = 'Private as requested.';
 
-const formatPhone = (phone) => {
+const formatPhone = (phone: string) => {
   if (phone?.length === 10) {
     return `(${phone?.slice(0, 3)}) ${phone?.slice(3, 6)}-${phone?.slice(6)}`;
   } else {
@@ -41,7 +49,14 @@ const formatPhone = (phone) => {
   }
 };
 
-const PersonalInfoList = ({ myProf, profile, isOnline, createSnackbar }) => {
+type Props = {
+  myProf: boolean;
+  profile: profileType;
+  isOnline: boolean;
+  createSnackbar: (message: string, severity: AlertColor) => void;
+};
+
+const PersonalInfoList = ({ myProf, profile, isOnline, createSnackbar }: Props) => {
   const [isMobilePhonePrivate, setIsMobilePhonePrivate] = useState(
     Boolean(profile.IsMobilePhonePrivate && profile.MobilePhone !== PRIVATE_INFO),
   );
@@ -49,8 +64,8 @@ const PersonalInfoList = ({ myProf, profile, isOnline, createSnackbar }) => {
     profile.CliftonStrengths?.Private,
   );
   const [openAlumniUpdateForm, setOpenAlumniUpdateForm] = useState(false);
-  const [mailCombo, setMailCombo] = useState();
-  const [advisorsList, setAdvisorsList] = useState([]);
+  const [mailCombo, setMailCombo] = useState<string>();
+  const [advisorsList, setAdvisorsList] = useState<AdvisorType[]>([]);
   const [showMailCombo, setShowMailCombo] = useState(false);
   const isStudent = profile.PersonType?.includes('stu');
   const isFacStaff = profile.PersonType?.includes('fac');
@@ -61,7 +76,9 @@ const PersonalInfoList = ({ myProf, profile, isOnline, createSnackbar }) => {
     AuthGroup.AcademicInfoView,
   );
   const [isJoinDialogOpen, setIsJoinDialogOpen] = useState(false);
-  const [profPlannedGradYear, setProfPlannedGradYear] = useState(profile.PlannedGradYear);
+  const [profPlannedGradYear, setProfPlannedGradYear] = useState(
+    checkIsStudent(profile) ? profile.PlannedGradYear : null,
+  );
 
   // KeepPrivate has different values for Students and FacStaff.
   // Students: null for public, 'S' for semi-private (visible to other students, some info redacted)
@@ -83,7 +100,8 @@ const PersonalInfoList = ({ myProf, profile, isOnline, createSnackbar }) => {
    */
 
   // Students' on-campus location is public unless the student is marked as private
-  const isCampusLocationPrivate = isStudent && keepPrivate && profile.OnOffCampus !== PRIVATE_INFO;
+  const isCampusLocationPrivate =
+    checkIsStudent(profile) && keepPrivate && profile.OnOffCampus !== PRIVATE_INFO;
 
   // Students' home phone is always private. FacStaffs' home phone is private for private users
   const [isHomePhonePrivate, setIsHomePhonePrivate] = useState(isStudent || keepPrivate);
@@ -93,7 +111,8 @@ const PersonalInfoList = ({ myProf, profile, isOnline, createSnackbar }) => {
     (keepPrivate && profile.HomeCity !== PRIVATE_INFO) || profile.HomeStreet2;
 
   // FacStaff spouses are private for private users
-  const isSpousePrivate = isFacStaff && keepPrivate && profile.SpouseName !== PRIVATE_INFO;
+  const isSpousePrivate =
+    checkIsFacStaff(profile) && keepPrivate && profile.SpouseName !== PRIVATE_INFO;
 
   // Get a student's mailbox combination and advisor using information in their profile
   useEffect(() => {
@@ -221,7 +240,7 @@ const PersonalInfoList = ({ myProf, profile, isOnline, createSnackbar }) => {
       contentText={
         <>
           {streetAddr}
-          <span className={keepPrivate ? null : styles.not_private}>
+          <span className={keepPrivate ? undefined : styles.not_private}>
             {profile.HomeCity === PRIVATE_INFO
               ? PRIVATE_INFO
               : profile.Country === 'United States of America' || !profile.Country
@@ -236,7 +255,7 @@ const PersonalInfoList = ({ myProf, profile, isOnline, createSnackbar }) => {
   );
 
   const minors =
-    profile.Minors?.length > 0 && !isFacStaff ? (
+    checkIsStudent(profile) && profile.Minors?.length > 0 ? (
       <ProfileInfoListItem
         title={profile.Minors?.length > 1 ? 'Minors:' : 'Minor:'}
         contentText={profile.Minors?.join(', ')}
@@ -244,7 +263,7 @@ const PersonalInfoList = ({ myProf, profile, isOnline, createSnackbar }) => {
     ) : null;
 
   const majors =
-    isFacStaff || (isAlumni && !profile.Majors?.length) ? null : (
+    checkIsFacStaff(profile) || (checkIsAlumni(profile) && !profile.Majors?.length) ? null : (
       <ProfileInfoListItem
         title={profile.Majors?.length > 1 ? 'Majors:' : 'Major:'}
         contentText={!profile.Majors?.length ? 'Deciding' : profile.Majors?.join(', ')}
@@ -252,7 +271,7 @@ const PersonalInfoList = ({ myProf, profile, isOnline, createSnackbar }) => {
     );
 
   const plannedGraduationYear =
-    myProf && isStudent ? (
+    myProf && checkIsStudent(profile) ? (
       <ProfileInfoListItem
         title={'Planned Graduation Year:'}
         contentText={
@@ -268,7 +287,7 @@ const PersonalInfoList = ({ myProf, profile, isOnline, createSnackbar }) => {
           </Grid>
         }
       />
-    ) : profPlannedGradYear ? (
+    ) : profPlannedGradYear && checkIsStudent(profile) ? (
       <ProfileInfoListItem
         title={'Planned Graduation Year:'}
         contentText={profile.PlannedGradYear}
@@ -292,23 +311,25 @@ const PersonalInfoList = ({ myProf, profile, isOnline, createSnackbar }) => {
       </Grid>
     ) : null;
 
-  const handleAlumniUpdateForm = (status) => {
+  const handleAlumniUpdateForm = (status: { type: AlertColor; message: string }) => {
     setOpenAlumniUpdateForm(false);
     createSnackbar(status.message, status.type);
   };
 
   const gradYearAndMajor = () => {
-    var text = profile.PreferredClassYear;
-    if (profile.Major1Description !== '') {
-      text += ' | ' + profile.Major1Description;
-    }
-    if (profile.Major2Description !== '') {
-      text += ' & ' + profile.Major2Description;
+    if (checkIsAlumni(profile)) {
+      let text = profile.PreferredClassYear;
+      if (profile.Major1Description !== '') {
+        text += ' | ' + profile.Major1Description;
+      }
+      if (profile.Major2Description !== '') {
+        text += ' & ' + profile.Major2Description;
+      }
+      return text;
     }
-    return text;
   };
 
-  const graduationYear = isAlumni && (
+  const graduationYear = checkIsAlumni(profile) && (
     <ProfileInfoListItem title={profile.College + ' Alum:'} contentText={gradYearAndMajor()} />
   );
 
@@ -326,15 +347,21 @@ const PersonalInfoList = ({ myProf, profile, isOnline, createSnackbar }) => {
               <a href={strength.link} target="_blank" rel="noopener noreferrer" key={strength.name}>
                 <b style={{ color: strength.color }}>{strength.name}</b>
               </a>
-            )).reduce((prev, curr) => [prev, ', ', curr])}
-            <GordonTooltip enterTouchDelay={50} leaveTouchDelay={5000}>
-              <span style={{ fontSize: '0.8rem' }}>
-                Categories:&nbsp;
-                <span style={{ color: '#60409f' }}>Executing</span>,{' '}
-                <span style={{ color: '#c88a2e' }}>Influencing</span>,{' '}
-                <span style={{ color: '#04668f' }}>Relationship</span>,{' '}
-                <span style={{ color: '#2c8b0f' }}>Thinking</span>
-              </span>
+            )).reduce((prev, curr) => (
+              <>
+                {prev}, {curr}
+              </>
+            ))}
+            <GordonTooltip title={''} enterTouchDelay={50} leaveTouchDelay={5000}>
+              {
+                <span style={{ fontSize: '0.8rem' }}>
+                  Categories:&nbsp;
+                  <span style={{ color: '#60409f' }}>Executing</span>,{' '}
+                  <span style={{ color: '#c88a2e' }}>Influencing</span>,{' '}
+                  <span style={{ color: '#04668f' }}>Relationship</span>,{' '}
+                  <span style={{ color: '#2c8b0f' }}>Thinking</span>
+                </span>
+              }
             </GordonTooltip>
           </Typography>
         ) : (
@@ -539,19 +566,21 @@ const PersonalInfoList = ({ myProf, profile, isOnline, createSnackbar }) => {
     ) : null;
 
   const campusDormInfo =
-    isStudent && profile.OnOffCampus && !(profile.BuildingDescription || profile.Hall) ? (
+    checkIsStudent(profile) &&
+    profile.OnOffCampus &&
+    !(profile.BuildingDescription || profile.Hall) ? (
       <ProfileInfoListItem
         title="Dormitory:"
         contentText={profile.OnOffCampus}
-        private={isCampusLocationPrivate}
+        privateInfo={isCampusLocationPrivate}
         myProf={myProf}
       />
-    ) : isStudent ? (
+    ) : checkIsStudent(profile) ? (
       <ProfileInfoListItem
         title="Dormitory:"
         contentText={
           <>
-            <span className={keepPrivate ? null : styles.not_private}>
+            <span className={keepPrivate ? undefined : styles.not_private}>
               {profile.BuildingDescription ?? profile.Hall}
             </span>
 
@@ -584,7 +613,7 @@ const PersonalInfoList = ({ myProf, profile, isOnline, createSnackbar }) => {
     ) : null;
 
   const spouse =
-    isFacStaff && profile.SpouseName ? (
+    checkIsFacStaff(profile) && profile.SpouseName ? (
       <ProfileInfoListItem
         title="Spouse:"
         contentText={profile.SpouseName}
@@ -603,7 +632,7 @@ const PersonalInfoList = ({ myProf, profile, isOnline, createSnackbar }) => {
         and look under "Personal Info" tab.
       </Typography>
     ) : isStudent ? (
-      <div align="left" className={styles.note}>
+      <div className={styles.note}>
         <Typography>NOTE:</Typography>
         <ul>
           <li>
@@ -688,7 +717,7 @@ const PersonalInfoList = ({ myProf, profile, isOnline, createSnackbar }) => {
           <Grid container className={styles.header}>
             <CardHeader title="Personal Information" />
           </Grid>
-          <Grid item xs={4} align="right">
+          <Grid item xs={4}>
             {/* visible only for fac/staff on their profile */}
             {/* isHomePhonePrivate is a misleading name for determining if personal information should be shown */}
             {isFacStaff && myProf ? (
@@ -701,7 +730,7 @@ const PersonalInfoList = ({ myProf, profile, isOnline, createSnackbar }) => {
                   />
                 }
                 label={isHomePhonePrivate ? 'Private' : 'Public'}
-                labelPlacement="right"
+                labelPlacement="end"
                 disabled={!isOnline}
               />
             ) : null}
@@ -732,7 +761,7 @@ const PersonalInfoList = ({ myProf, profile, isOnline, createSnackbar }) => {
         profile={profile}
         closeWithSnackbar={handleAlumniUpdateForm}
         openAlumniUpdateForm={openAlumniUpdateForm}
-        setOpenAlumniUpdateForm={(bool) => setOpenAlumniUpdateForm(bool)}
+        setOpenAlumniUpdateForm={(bool: boolean) => setOpenAlumniUpdateForm(bool)}
       />
     </Grid>
   );
diff --git a/src/components/Profile/components/ProfileInfoListItem/index.jsx b/src/components/Profile/components/ProfileInfoListItem/index.tsx
similarity index 80%
rename from src/components/Profile/components/ProfileInfoListItem/index.jsx
rename to src/components/Profile/components/ProfileInfoListItem/index.tsx
index 675ec6ca8f..923cfa51c1 100644
--- a/src/components/Profile/components/ProfileInfoListItem/index.jsx
+++ b/src/components/Profile/components/ProfileInfoListItem/index.tsx
@@ -1,13 +1,22 @@
 import { Divider, ListItem, Grid, Typography } from '@mui/material';
 import styles from './ProfileInfoListItem.module.css';
 
+type ProfileInfo = {
+  title?: string;
+  contentText?: JSX.Element | string;
+  ContentIcon?: JSX.Element | null | boolean;
+  privateInfo?: boolean | string;
+  myProf?: boolean;
+  contentClass?: string;
+};
+
 const ProfileInfoListItem = ({
   title,
   contentText,
   ContentIcon = null,
   privateInfo = false,
   myProf = false,
-}) => {
+}: ProfileInfo) => {
   const gridSizeProps = ContentIcon ? { xs: 4, md: 3, lg: 4 } : { xs: 7 };
 
   return (
@@ -22,7 +31,7 @@ const ProfileInfoListItem = ({
             item
             {...gridSizeProps}
             alignItems="center"
-            className={privateInfo ? (myProf ? styles.private : styles.privateNotMine) : null}
+            className={privateInfo ? (myProf ? styles.private : styles.privateNotMine) : undefined}
           >
             {contentText}
           </Grid>
diff --git a/src/components/Profile/components/SchedulePanel/index.tsx b/src/components/Profile/components/SchedulePanel/index.tsx
index 89ab7b1c0e..135b8a6382 100644
--- a/src/components/Profile/components/SchedulePanel/index.tsx
+++ b/src/components/Profile/components/SchedulePanel/index.tsx
@@ -72,9 +72,9 @@ const GordonSchedulePanel = ({ profile, myProf }: Props) => {
             id="schedule-header"
             className={`gc360_header ${styles.accordionHeader}`}
           >
-          <Grid container className={styles.header}>
-            <CardHeader title={'Course Schedule'} />
-          </Grid>
+            <Grid container className={styles.header}>
+              <CardHeader title={'Course Schedule'} />
+            </Grid>
           </AccordionSummary>
         ) : (
           <div></div>
diff --git a/src/components/Profile/components/index.jsx b/src/components/Profile/components/index.tsx
similarity index 100%
rename from src/components/Profile/components/index.jsx
rename to src/components/Profile/components/index.tsx
diff --git a/src/components/Profile/index.jsx b/src/components/Profile/index.tsx
similarity index 74%
rename from src/components/Profile/index.jsx
rename to src/components/Profile/index.tsx
index 8db031199b..f1fd9209a2 100644
--- a/src/components/Profile/index.jsx
+++ b/src/components/Profile/index.tsx
@@ -1,5 +1,6 @@
-import { Grid } from '@mui/material';
+import { Grid, AlertColor } from '@mui/material';
 import GordonSnackbar from 'components/Snackbar';
+import { Profile as profileType, isFacStaff as checkIsFacStaff } from 'services/user';
 import { useAuthGroups } from 'hooks';
 import useNetworkStatus from 'hooks/useNetworkStatus';
 import { useCallback, useEffect, useState } from 'react';
@@ -15,14 +16,19 @@ import {
   VictoryPromise,
 } from './components';
 
-const Profile = ({ profile, myProf }) => {
-  const [snackbar, setSnackbar] = useState({ message: '', severity: null, open: false });
+type Props = {
+  profile: profileType;
+  myProf: boolean;
+};
+
+const Profile = ({ profile, myProf }: Props) => {
+  const [snackbar, setSnackbar] = useState({ message: '', severity: '', open: false });
   const isOnline = useNetworkStatus();
   const viewerIsPolice = useAuthGroups(AuthGroup.Police);
-  const [canReadStudentSchedules, setCanReadStudentSchedules] = useState();
+  const [canReadStudentSchedules, setCanReadStudentSchedules] = useState<boolean>();
   const profileIsStudent = profile.PersonType?.includes('stu');
 
-  const createSnackbar = useCallback((message, severity) => {
+  const createSnackbar = useCallback((message: string, severity: AlertColor) => {
     setSnackbar({ message, severity, open: true });
   }, []);
 
@@ -52,17 +58,19 @@ const Profile = ({ profile, myProf }) => {
         </Grid>
       )}
 
-      <Grid item xs={12} lg={10}>
-        <Grid container spacing={2}>
-          <OfficeInfoList profile={profile} myProf={myProf} />
+      {checkIsFacStaff(profile) && (
+        <Grid item xs={12} lg={10}>
+          <Grid container spacing={2}>
+            <OfficeInfoList profile={profile} myProf={myProf} />
 
-          {viewerIsPolice ? <EmergencyInfoList username={profile.AD_Username} /> : null}
+            {viewerIsPolice ? <EmergencyInfoList username={profile.AD_Username} /> : null}
+          </Grid>
         </Grid>
-      </Grid>
+      )}
 
       {(myProf || !profileIsStudent || canReadStudentSchedules) && (
-        <Grid item xs={12} lg={10} align="center">
-          <SchedulePanel profile={profile} myProf={myProf} isOnline={isOnline} />
+        <Grid item xs={12} lg={10}>
+          <SchedulePanel profile={profile} myProf={myProf} />
         </Grid>
       )}
 
@@ -90,7 +98,7 @@ const Profile = ({ profile, myProf }) => {
       <GordonSnackbar
         open={snackbar.open}
         text={snackbar.message}
-        severity={snackbar.severity}
+        severity={snackbar.severity as AlertColor}
         onClose={() => setSnackbar((s) => ({ ...s, open: false }))}
       />
     </Grid>
diff --git a/src/components/Snackbar/index.jsx b/src/components/Snackbar/index.tsx
similarity index 61%
rename from src/components/Snackbar/index.jsx
rename to src/components/Snackbar/index.tsx
index 6f35f4787e..a23a9b6739 100644
--- a/src/components/Snackbar/index.jsx
+++ b/src/components/Snackbar/index.tsx
@@ -1,4 +1,4 @@
-import { Snackbar, Alert } from '@mui/material/';
+import { Snackbar, SnackbarProps, Alert, AlertColor, AlertProps } from '@mui/material/';
 import {
   CheckCircleOutlineOutlined,
   ErrorOutline,
@@ -6,7 +6,24 @@ import {
   ReportProblemOutlined,
 } from '@mui/icons-material/';
 
-const SimpleSnackbar = ({ open, text, severity, duration = 10000, onClose, ...otherProps }) => {
+type Props = SnackbarProps &
+  AlertProps & {
+    open: boolean;
+    text?: string | null;
+    severity?: AlertColor;
+    duration?: number;
+    onClose: () => void;
+  };
+
+const SimpleSnackbar = ({
+  children,
+  open,
+  text,
+  severity,
+  duration = 10000,
+  onClose,
+  ...otherProps
+}: Props) => {
   return (
     <Snackbar open={open} autoHideDuration={duration} onClose={onClose} {...otherProps}>
       <Alert
diff --git a/src/components/SpreadsheetUploader/index.jsx b/src/components/SpreadsheetUploader/index.tsx
similarity index 83%
rename from src/components/SpreadsheetUploader/index.jsx
rename to src/components/SpreadsheetUploader/index.tsx
index 9e3580086e..bb16eaf473 100644
--- a/src/components/SpreadsheetUploader/index.jsx
+++ b/src/components/SpreadsheetUploader/index.tsx
@@ -6,6 +6,7 @@ import { useState } from 'react';
 import Dropzone from 'react-dropzone';
 import { read, utils } from 'xlsx';
 import styles from './SpreadsheetUploader.module.css';
+import errorLogService from 'services/logging';
 
 const acceptedTypes = [
   'application/vnd.ms-excel',
@@ -13,7 +14,7 @@ const acceptedTypes = [
   'text/csv',
 ];
 
-const displayCell = (cellData) => {
+const displayCell = (cellData: unknown) => {
   if (cellData instanceof Date) {
     return cellData.toLocaleString();
   } else {
@@ -21,6 +22,18 @@ const displayCell = (cellData) => {
   }
 };
 
+type Props = {
+  open: boolean;
+  setOpen: (arg0: boolean) => void;
+  onSubmitData: (data: object[] | null | undefined) => void;
+  title: string;
+  maxColumns: number;
+  requiredColumns: string[];
+  otherColumns: string[];
+  buttonName: string;
+  template: string;
+};
+
 const SpreadsheetUploader = ({
   open,
   setOpen,
@@ -31,11 +44,11 @@ const SpreadsheetUploader = ({
   otherColumns = [],
   buttonName,
   template,
-}) => {
-  const [data, setData] = useState();
-  const [error, setError] = useState();
+}: Props) => {
+  const [data, setData] = useState<object[] | null>();
+  const [error, setError] = useState<string | null>();
 
-  const handleFileUpload = async ([file]) => {
+  const handleFileUpload = async ([file]: File[]) => {
     try {
       if (!acceptedTypes.includes(file.type)) {
         throw new Error('The file is not one of the supported file types.');
@@ -46,7 +59,7 @@ const SpreadsheetUploader = ({
       const workbook = read(data, { cellDates: true });
       const sheet = workbook.Sheets[workbook.SheetNames[0]];
 
-      const uploadedData = utils.sheet_to_json(sheet);
+      const uploadedData = utils.sheet_to_json<object>(sheet);
 
       uploadedData.forEach((row) => {
         let columnNames = Object.keys(row);
@@ -69,8 +82,8 @@ const SpreadsheetUploader = ({
       });
 
       setData(uploadedData);
-    } catch (e) {
-      setError(e.message);
+    } catch (e: unknown) {
+      if (e instanceof Error) setError(e.message);
     }
   };
 
@@ -129,9 +142,9 @@ const SpreadsheetUploader = ({
             {data.map((row, index) => (
               <Paper key={index} className={styles.dataconfirmationcard}>
                 {requiredColumns.map((columnName) =>
-                  row[columnName] ? (
+                  row[columnName as keyof typeof row] ? (
                     <Typography variant="body2">
-                      <b>{columnName}:</b> {displayCell(row[columnName])}
+                      <b>{columnName}:</b> {displayCell(row[columnName as keyof typeof row])}
                     </Typography>
                   ) : null,
                 )}
@@ -143,7 +156,7 @@ const SpreadsheetUploader = ({
         dropZone
       )}
       <GordonSnackbar
-        open={error}
+        open={Boolean(error)}
         text={error}
         severity={'error'}
         anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
diff --git a/src/services/membership.ts b/src/services/membership.ts
index 82abb4cfd4..51651a4e69 100644
--- a/src/services/membership.ts
+++ b/src/services/membership.ts
@@ -121,7 +121,7 @@ const getFollowersNum = (involvementCode: string, sessionCode: string): Promise<
 const getPublicMemberships = (username: string): Promise<MembershipHistory[]> =>
   groupByActivityCode(username).then(sort(compareByProperty('ActivityDescription')));
 
-interface MembershipHistory {
+export interface MembershipHistory {
   ActivityCode: string;
   ActivityDescription: string;
   ActivityImagePath: string;
diff --git a/src/services/user.ts b/src/services/user.ts
index 17489352c0..e882d483dc 100644
--- a/src/services/user.ts
+++ b/src/services/user.ts
@@ -43,6 +43,16 @@ type BaseProfileInfo = {
   OnCampusPhone: string;
   OnCampusPrivatePhone: string;
   OnCampusFax: string;
+  PersonalEmail?: string;
+  WorkEmail?: string;
+  aEmail?: string;
+  PreferredEmail?: string;
+  doNotContact?: boolean;
+  doNotMail?: boolean;
+  WorkPhone?: string;
+  MobilePhone?: string;
+  IsMobilePhonePrivate: number;
+  PreferredPhone?: string;
   Mail_Location: string;
   HomeStreet1: string;
   HomeStreet2: string;
@@ -69,7 +79,8 @@ type BaseProfileInfo = {
   Calendar: string;
   PersonType: string;
   fullName?: string;
-  CliftonStrengths?: CliftonStrengths | null;
+  CliftonStrengths: CliftonStrengths | null;
+  Married?: string;
 };
 
 export type UnformattedFacStaffProfileInfo = BaseProfileInfo & {
@@ -92,6 +103,7 @@ export type UnformattedStudentProfileInfo = BaseProfileInfo & {
   OffCampusCountry: string;
   OffCampusPhone: string;
   OffCampusFax: string;
+  Hall?: string;
   Cohort: string;
   Class: Class;
   Major: string;
@@ -118,7 +130,7 @@ export type UnformattedStudentProfileInfo = BaseProfileInfo & {
   Minor3Description: string;
   ChapelRequired: number;
   ChapelAttended: number;
-  plannedGradYear: string;
+  PlannedGradYear: string;
 };
 
 type UnformattedAlumniProfileInfo = BaseProfileInfo & {
@@ -130,6 +142,9 @@ type UnformattedAlumniProfileInfo = BaseProfileInfo & {
   PreferredClassYear?: string;
   ShareName: string;
   ShareAddress?: string;
+  Majors: string[];
+  Major1Description: string;
+  Major2Description: string;
 };
 
 export type UnformattedProfileInfo =
@@ -154,7 +169,7 @@ export type StudentProfileInfo = {
 
 export type Profile = FacStaffProfileInfo | StudentProfileInfo | AlumniProfileInfo;
 
-type StudentAdvisorInfo = {
+export type StudentAdvisorInfo = {
   Firstname: string;
   Lastname: string;
   AD_Username: string;
@@ -181,14 +196,34 @@ export type OfficeLocationQuery = {
   RoomNumber: string;
 };
 
-function isStudent(profile: Profile): profile is StudentProfileInfo;
-function isStudent(profile: UnformattedProfileInfo): profile is UnformattedStudentProfileInfo;
-function isStudent(
+export function isStudent(profile: Profile): profile is StudentProfileInfo;
+export function isStudent(
+  profile: UnformattedProfileInfo,
+): profile is UnformattedStudentProfileInfo;
+export function isStudent(
   profile: UnformattedProfileInfo | Profile,
 ): profile is UnformattedStudentProfileInfo | StudentProfileInfo {
   return profile?.PersonType.includes('stu') || false;
 }
 
+export function isFacStaff(profile: Profile): profile is FacStaffProfileInfo;
+export function isFacStaff(
+  profile: UnformattedProfileInfo,
+): profile is UnformattedFacStaffProfileInfo;
+export function isFacStaff(
+  profile: UnformattedProfileInfo | Profile,
+): profile is UnformattedStudentProfileInfo | StudentProfileInfo {
+  return profile?.PersonType.includes('fac') || false;
+}
+
+export function isAlumni(profile: Profile): profile is AlumniProfileInfo;
+export function isAlumni(profile: UnformattedProfileInfo): profile is UnformattedAlumniProfileInfo;
+export function isAlumni(
+  profile: UnformattedProfileInfo | Profile,
+): profile is UnformattedAlumniProfileInfo | AlumniProfileInfo {
+  return profile?.PersonType.includes('alu') || false;
+}
+
 function formatCountry(profile: UnformattedProfileInfo) {
   if (profile?.Country?.includes(',')) {
     const country = profile.Country;
@@ -229,13 +264,15 @@ const getProfile = (username: string = ''): Promise<UnformattedProfileInfo> =>
 const getAdvisors = (username: string): Promise<StudentAdvisorInfo[]> =>
   http.get(`profiles/Advisors/${username}/`);
 
-const getMailboxInformation = () => http.get('profiles/mailbox-information/');
+const getMailboxInformation = (): Promise<{ Combination: string }> =>
+  http.get('profiles/mailbox-information/');
 
 const getMailStops = (): Promise<string[]> => http.get(`profiles/mailstops`);
 
-const setMobilePhoneNumber = (value: number) => http.put(`profiles/mobile_phone_number/${value}/`);
+const setMobilePhoneNumber = (value: number | string) =>
+  http.put(`profiles/mobile_phone_number/${value}/`);
 
-const setPlannedGraduationYear = (value: number) => {
+const setPlannedGraduationYear = (value: number | string) => {
   const body = { plannedGradYear: value };
   http.put(`profiles/plannedGradYear`, body);
 };
@@ -302,7 +339,16 @@ const getProfileInfo = async (username: string = ''): Promise<Profile | undefine
   }
 };
 
-const getEmergencyInfo = async (username: string) => {
+type Contact = {
+  FirstName?: string;
+  LastName?: string;
+  Relationship?: string;
+  MobilePhone: string;
+  HomePhone: string;
+  WorkPhone: string;
+};
+
+const getEmergencyInfo = async (username: string): Promise<Contact[]> => {
   return await http.get(`profiles/emergency-contact/${username}/`);
 };
 
@@ -322,7 +368,7 @@ function updateSocialLink(platform: Platform, link: string) {
 
 type ProfileFieldUpdate = {
   Field: string;
-  Value: string;
+  Value: string | boolean;
   Label: string;
 };
 
diff --git a/src/services/utils.ts b/src/services/utils.ts
index 62bdd7c738..b0876572cc 100644
--- a/src/services/utils.ts
+++ b/src/services/utils.ts
@@ -1,5 +1,16 @@
 export type Override<What, With> = Omit<What, keyof With> & With;
 
+/**
+ * Gets the type of elements in an array, given the type of the array
+ */
+export type ArrayElement<ArrayType extends readonly unknown[]> =
+  ArrayType extends readonly (infer ElementType)[] ? ElementType : never;
+
+/**
+ * Omits the given key(s) from every case of a union, while preserving the union cases
+ */
+export type DistributiveOmit<T, K extends keyof any> = T extends any ? Omit<T, K> : never;
+
 /**
  * Create a closure to map an array on a given predicate
  *
diff --git a/src/views/CoCurricularTranscript/guestTranscript.tsx b/src/views/CoCurricularTranscript/guestTranscript.tsx
index fa4a94eb72..ea3b7620cd 100644
--- a/src/views/CoCurricularTranscript/guestTranscript.tsx
+++ b/src/views/CoCurricularTranscript/guestTranscript.tsx
@@ -177,5 +177,5 @@ export const exampleStudentProfile: StudentProfileInfo = {
   Minor3Description: '',
   ChapelRequired: 0,
   ChapelAttended: 0,
-  plannedGradYear: '',
+  PlannedGradYear: '',
 };