diff --git a/client/public/index.html b/client/public/index.html
index 598c9fd..595a9c9 100644
--- a/client/public/index.html
+++ b/client/public/index.html
@@ -15,7 +15,7 @@
     <title>MealPlanner</title>
   </head>
   <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <noscript><h1>You need to enable JavaScript to run this app.</h1></noscript>
     <div id="root"></div>
   </body>
 </html>
diff --git a/client/src/components/calendar/IngredientModal.js b/client/src/components/calendar/IngredientModal.js
index df9b871..1f8f367 100644
--- a/client/src/components/calendar/IngredientModal.js
+++ b/client/src/components/calendar/IngredientModal.js
@@ -22,7 +22,7 @@ export default function IngredientModal (props) {
       contentLabel="Ingredients Modal"
     >
       <div className='modalHeader'>
-        <Typography variant='h4'>My Ingredients:</Typography>
+        <Typography variant='h2'>My Ingredients:</Typography>
         <Button onClick={props.exit} variant='contained' startIcon={<ChevronLeft />}>Return</Button>
       </div>
       <div className='list-holder'>
diff --git a/client/src/components/calendar/ListModal.css b/client/src/components/calendar/ListModal.css
index 49093b3..cbbec86 100644
--- a/client/src/components/calendar/ListModal.css
+++ b/client/src/components/calendar/ListModal.css
@@ -42,6 +42,10 @@ summary:hover {
   height: 2.5em;
 }
 
+.modalHeader h2 {
+  font-size: 2.125rem;
+}
+
 @media only screen and (max-width: 778px) {
   .modalHeader h4 {
     font-size: 1.7rem;
diff --git a/client/src/components/calendar/ListModal.js b/client/src/components/calendar/ListModal.js
index d5749f4..9e231b1 100644
--- a/client/src/components/calendar/ListModal.js
+++ b/client/src/components/calendar/ListModal.js
@@ -21,7 +21,7 @@ export default function ListModal (props) {
       contentLabel='List Modal'
     >
       <div className='modalHeader'>
-        <Typography variant='h4'>Meals for {props.date.toDateString()}:</Typography>
+        <Typography variant='h2'>Meals for {props.date.toDateString()}:</Typography>
       </div>
       {getModalBody(props, meals, setShowMeals, setMeals, setLoadMeals)}
       <ReuseModal
diff --git a/client/src/components/calendar/MealModal.js b/client/src/components/calendar/MealModal.js
index 8145d72..f243989 100644
--- a/client/src/components/calendar/MealModal.js
+++ b/client/src/components/calendar/MealModal.js
@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import Modal from 'react-modal'
-import { Select, FormControl, Button, TextField, MenuItem, Typography } from '@material-ui/core'
+import { Select, FormControl, Button, TextField, MenuItem, Typography, InputLabel } from '@material-ui/core'
 import { Close, ChevronLeft, Publish } from '@material-ui/icons'
 import { addMeal } from '../../actions/actions'
 import IngredientList from '../general/IngredientList'
@@ -26,15 +26,16 @@ export default function MealModal (props) {
       contentLabel='Meal Modal'
     >
       <div className='modalHeader'>
-        <Typography variant='h4'>Add a meal for {props.date.toDateString()}</Typography>
+        <Typography variant='h2'>Add a meal for {props.date.toDateString()}</Typography>
         <Button variant='contained' startIcon={<ChevronLeft />} onClick={() => handleReturn(props)}>Return</Button>
       </div>
       <form id='mealModalForm' onSubmit={(event) => handleSubmit(event, props, mealName, mealNum, ingredients, description)}>
         <FormControl className='input-field'>
-          <TextField label='Meal Name' onChange={(event) => setMealName(event.target.value)} required />
+          <TextField label='Meal Name' id='meal-name' InputLabelProps={{ for: 'meal-name' }} onChange={(event) => setMealName(event.target.value)} required />
         </FormControl>
         <FormControl className='input-field'>
-          <Select labelId='selectLabel' defaultValue='0' name='mealNum' id='mealSelect' onChange={(event) => setMealNum(event.target.value)} required>
+          <InputLabel htmlFor='mealSelect' id='select-label'>For meal:</InputLabel>
+          <Select defaultValue='0' name='mealNum' id='mealSelect' labelId='select-label' inputProps={{ "aria-labelledby": 'select-label' }} onChange={(event) => setMealNum(event.target.value)} required>
             <MenuItem value='0'>Breakfast</MenuItem>
             <MenuItem value='1'>Lunch</MenuItem>
             <MenuItem value='2'>Dinner</MenuItem>
@@ -42,7 +43,7 @@ export default function MealModal (props) {
           </Select>
         </FormControl>
         <FormControl className='input-field list-holder'>
-          <Typography variant='h5'>Ingredients:</Typography>
+          <Typography variant='body'>Ingredients:</Typography>
           <IngredientList
             ingredients={ingredients}
             uid={props.uid}
@@ -54,7 +55,7 @@ export default function MealModal (props) {
           <Button variant='contained' onClick={(event) => handleAddIngredient(event, ingredients, setIngredients)}>Add Ingredient</Button>
         </FormControl>
         <FormControl className='input-field'>
-          <TextField label='Description' onChange={(event) => setDescription(event.target.value)} />
+          <TextField label='Description' id='meal-description' InputLabelProps={{ for: 'meal-description' }} onChange={(event) => setDescription(event.target.value)} />
         </FormControl>
         <div className='modalFooterButtons'>
           <Button startIcon={<Publish />} type='submit' variant='contained'>Submit</Button>
diff --git a/client/src/components/calendar/ReuseModal.js b/client/src/components/calendar/ReuseModal.js
index f1796cf..ceee539 100644
--- a/client/src/components/calendar/ReuseModal.js
+++ b/client/src/components/calendar/ReuseModal.js
@@ -10,8 +10,7 @@ export default function ReuseModal (props) {
       open={props.open}
       onClose={props.handleClose}
       scroll='paper'
-      aria-labelledby="reuse-dialog-title"
-      aria-describedby="reuse-dialog-description"
+      aria-label="reuse previous meals"
     >
       <DialogTitle id="reuse-dialog-title">Select Meal</DialogTitle>
       <DialogContent dividers id='reuse-dialog-content'>
@@ -37,11 +36,11 @@ export default function ReuseModal (props) {
       </DialogContent>
       <DialogActions>
         <FormControl variant="filled">
-          <InputLabel id="reuse-meal-label">Meal</InputLabel>
+          <InputLabel id='reuse-select-label' htmlFor='reuse-meal-select'>Meal</InputLabel>
           <Select
             variant='outlined'
-            labelId="reuse-meal-label"
             id='reuse-meal-select'
+            aria-labelledby='reuse-select-label'
             value={mealNum}
             onChange={(event) => setMealNum(event.target.value)}
           >
diff --git a/client/src/components/calendar/ShoppingModal.css b/client/src/components/calendar/ShoppingModal.css
index 7e83517..b59b60b 100644
--- a/client/src/components/calendar/ShoppingModal.css
+++ b/client/src/components/calendar/ShoppingModal.css
@@ -2,6 +2,10 @@
   margin-top: 5vh;
 }
 
+#shoppingModal h3 {
+  font-size: 1.5rem !important;
+}
+
 #shoppingContainer {
   display: flex;
   flex-direction: column;
@@ -45,6 +49,14 @@
   min-width: 190px;
 }
 
+.tablediv .MuiTypography-body1 {
+  font-size: 1.25rem;
+}
+
+.tablediv .MuiTypography-body2 {
+  font-size: 1rem;
+}
+
 paper > table {
   max-width: 650px;
   min-width: 400px;
diff --git a/client/src/components/calendar/ShoppingModal.js b/client/src/components/calendar/ShoppingModal.js
index 60b95b8..55a60c9 100644
--- a/client/src/components/calendar/ShoppingModal.js
+++ b/client/src/components/calendar/ShoppingModal.js
@@ -20,16 +20,17 @@ export default function ShoppingModal (props) {
       contentLabel='Shopping List Modal'
     >
       <div className='modalHeader'>
-        <Typography variant='h4'>My Shopping List:</Typography>
+        <Typography variant='h2'>My Shopping List:</Typography>
         <Button onClick={props.exit} variant='contained' startIcon={<ChevronLeft />}>Return</Button>
       </div>
+      <Typography variant='h3' align='center'>Needed Ingredients:</Typography>
       <div className='tablediv'>
         <TableContainer component='paper'>
           <Table aria-label='Ingredient Table'>
             <TableHead className='primaryBack'>
               <TableRow>
-                <TableCell><Typography variant='h6' color='secondary'>Ingredient</Typography></TableCell>
-                <TableCell><Typography variant='h6' color='secondary'>Quantity</Typography></TableCell>
+                <TableCell><Typography variant='body1' color='secondary'>Ingredient</Typography></TableCell>
+                <TableCell><Typography variant='body1' color='secondary'>Quantity</Typography></TableCell>
               </TableRow>
             </TableHead>
             <TableBody>
@@ -37,11 +38,11 @@ export default function ShoppingModal (props) {
                 Object.keys(need).map(name => {
                   return (
                     <TableRow key={name} className='row'>
-                      <TableCell><Typography color='textPrimary'>{name}</Typography></TableCell>
+                      <TableCell><Typography variant='body2' color='textPrimary'>{name}</Typography></TableCell>
                       {
                         Object.keys(need[name]).map(units => {
                           return (
-                            <TableCell component='th' scope='row' key={uid(units)}><Typography>{need[name][units]} {units}</Typography></TableCell>
+                            <TableCell component='th' scope='row' key={uid(units)}><Typography variant='body2'>{need[name][units]} {units}</Typography></TableCell>
                           )
                         })
                       }
@@ -53,13 +54,13 @@ export default function ShoppingModal (props) {
           </Table>
         </TableContainer>
       </div>
-      <Typography variant='h5' align='center'>Export List:</Typography>
+      <Typography variant='h3' align='center'>Export List:</Typography>
       <div id='exportContainer'>
         <Button variant='contained' onClick={() => handleCopy(need)} startIcon={<FileCopy />}>Copy to Clipboard</Button>
         <Button variant='contained' onClick={() => window.print()} startIcon={<Print />}>Print</Button>
         <Button variant='contained' onClick={() => handleEmail(need)} startIcon={<Email />}>Share by Email</Button>
       </div>
-      <Typography variant='h5' align='center'>Date Range to Shop For:</Typography>
+      <Typography variant='h3' align='center'>Date Range to Shop For:</Typography>
       <div id='dateRangeContainer'>
         <FormControl>
           <TextField
@@ -67,6 +68,8 @@ export default function ShoppingModal (props) {
             defaultValue={7}
             label='Date Range'
             className='qInput'
+            id='date-range'
+            InputLabelProps={{ for: 'date-range' }}
             inputProps={{ type: 'number', min: 1 }}
             onChange={(event) => handleTimeChange(event, props, time, setNeed, setTime)}
           />
diff --git a/client/src/components/general/Footer.css b/client/src/components/general/Footer.css
index c97f04a..3964010 100644
--- a/client/src/components/general/Footer.css
+++ b/client/src/components/general/Footer.css
@@ -2,6 +2,6 @@
   position: relative !important;
   margin-top: 2%;
   height: fit-content;
-  padding: 10px;
+  padding: 8px;
   text-align: center;
 }
\ No newline at end of file
diff --git a/client/src/components/general/Footer.js b/client/src/components/general/Footer.js
index afbe38f..b7e1f15 100644
--- a/client/src/components/general/Footer.js
+++ b/client/src/components/general/Footer.js
@@ -5,7 +5,7 @@ import './Footer.css'
 export default function Footer () {
   return (
     <AppBar className='footer'>
-      <Typography variant='h5'>Made by Julien Bertazzo Lambert</Typography>
+      <Typography variant='body1'>Made by Julien Bertazzo Lambert</Typography>
     </AppBar>
   )
 }
\ No newline at end of file
diff --git a/client/src/components/general/IngredientList.js b/client/src/components/general/IngredientList.js
index 44edf5b..dd981c2 100644
--- a/client/src/components/general/IngredientList.js
+++ b/client/src/components/general/IngredientList.js
@@ -27,14 +27,17 @@ export default function IngredientList (props) {
                   type='number'
                   label='Quantity'
                   className='qInput'
+                  id={`qinput-${index}`}
+                  InputLabelProps={{ for: `qinput-${index}` }}
                   inputProps={{ type: 'number' }}
                   onInput={props.handleQtyChange}
                   value={ingredient.qty}
                 />
                 <FormControl>
-                  <InputLabel htmlFor="units">Units</InputLabel>
+                  <InputLabel htmlFor={`uinput-${index}`}>Units</InputLabel>
                   <NativeSelect
                     className='uInput'
+                    id={`uinput-${index}`}
                     value={ingredient.units}
                     onChange={props.handleUnitsChange}
                     name='units'
@@ -64,7 +67,7 @@ export default function IngredientList (props) {
                   defaultValue={ingredient.name}
                   renderInput={(params) => <TextField {...params} label='Ingredient' onSelect={props.handleNameChange} /> }
                 />
-                <IconButton onClick={() => props.removeIngredient(index)}>
+                <IconButton aria-label='remove entry' onClick={() => props.removeIngredient(index)}>
                   <Clear />
                 </IconButton>
               </ListItem>
diff --git a/client/src/components/general/NavBar.css b/client/src/components/general/NavBar.css
index b6c807c..219c0eb 100644
--- a/client/src/components/general/NavBar.css
+++ b/client/src/components/general/NavBar.css
@@ -31,8 +31,12 @@ svg {
   margin-right: 5px;
 }
 
+.brand-logo h1 {
+  font-size: 2.3rem !important;
+}
+
 @media only screen and (max-width: 481px) {
-  .brand-logo h4 {
+  .brand-logo h1 {
     font-size: 1.85rem !important;
   }
 
diff --git a/client/src/components/general/NavBar.js b/client/src/components/general/NavBar.js
index 05f5c24..de891c3 100644
--- a/client/src/components/general/NavBar.js
+++ b/client/src/components/general/NavBar.js
@@ -29,7 +29,15 @@ export default function NavBar (props) {
             </ButtonGroup>
           </div>
           <div className={classes.mobileSection}>
-            <IconButton edge='end' aria-controls='auth-menu' aria-haspopup='true' color='inherit' onClick={(event) => setAuthAnchorEl(event.target)}><MenuIcon /></IconButton>
+            <IconButton
+              edge='end'
+              aria-label='Navigation Menu'
+              aria-controls='auth-menu'
+              aria-haspopup='true'
+              color='inherit'
+              onClick={(event) => setAuthAnchorEl(event.target)}>
+                <MenuIcon />
+            </IconButton>
             <Menu
               id='auth-menu'
               anchorEl={authAnchorEl}
@@ -66,7 +74,7 @@ export default function NavBar (props) {
   return (
     <AppBar className={classes.navBar} position='static'>
       <Toolbar className='nav-wrapper'>
-        <a href='/' id='logo' className='brand-logo'><Typography variant='h4'>MealPlanner</Typography></a>
+        <a href='/' id='logo' className='brand-logo'><Typography variant='h1'>MealPlanner</Typography></a>
         {getRightSide()}
       </Toolbar>
     </AppBar>
diff --git a/client/src/pages/auth/AuthForm.css b/client/src/pages/auth/AuthForm.css
index 72d91ad..065ca35 100644
--- a/client/src/pages/auth/AuthForm.css
+++ b/client/src/pages/auth/AuthForm.css
@@ -29,6 +29,10 @@
   margin: 3% 0;
 }
 
+.container h2 {
+  font-size: 2.25rem !important;
+}
+
 #authForm {
   display: flex;
   flex-direction: column;
diff --git a/client/src/pages/auth/AuthForm.js b/client/src/pages/auth/AuthForm.js
index 8f74448..f9ab700 100644
--- a/client/src/pages/auth/AuthForm.js
+++ b/client/src/pages/auth/AuthForm.js
@@ -16,12 +16,12 @@ export default function AuthForm (props) {
         className='container'
         onSubmit={props.showLogin ? (event) => handleLogin(event, username, pass) : (event) => handleSignup(event, username, pass, confPass)}
       >
-        <Typography variant='h4'>{props.showLogin ? <Person /> : <PersonAdd />} {props.showLogin ? 'Log In' : 'Sign Up'}</Typography>
+        <Typography variant='h2'>{props.showLogin ? <Person /> : <PersonAdd />} {props.showLogin ? 'Log In' : 'Sign Up'}</Typography>
         <FormControl className='input-field'>
-          <TextField label='Username' onChange={(event) => setUsername(event.target.value)} inputProps={{ minLength: 5 }} required />
+          <TextField label='Username' id='username-input' InputLabelProps={{ for: 'username-input' }} onChange={(event) => setUsername(event.target.value)} inputProps={{ minLength: 5 }} required />
         </FormControl>
         <FormControl className='input-field'>
-          <TextField label='Password' type='password' onChange={(event) => setPass(event.target.value)} inputProps={{ minLength: 8 }} required />
+          <TextField label='Password' id='pass-input' InputLabelProps={{ for: 'pass-input' }} type='password' onChange={(event) => setPass(event.target.value)} inputProps={{ minLength: 8 }} required />
         </FormControl>
         {getConfPassField(props, setConfPass)}
         <FormControl className='input-field'>
@@ -42,6 +42,8 @@ const getConfPassField = (props, setConfPass) => {
           onChange={(event) => setConfPass(event.target.value)}
           inputProps={{ minLength: 8 }}
           required
+          id='confpass-input'
+          InputLabelProps={{ for: 'confpass-input' }}
         />
       </FormControl>)
   }
diff --git a/client/src/pages/calendar/CalendarView.css b/client/src/pages/calendar/CalendarView.css
index 1947b75..9ee4383 100644
--- a/client/src/pages/calendar/CalendarView.css
+++ b/client/src/pages/calendar/CalendarView.css
@@ -83,6 +83,11 @@
   color: black;
 }
 
+/* Increased contrast for accessibility */
+.react-calendar__month-view__days__day--neighboringMonth {
+  color: #4d4d4d
+}
+
 .calendar-button-styles {
   display: flex;
   border: 1px solid #efefef !important;
diff --git a/client/src/pages/home/HomePage.js b/client/src/pages/home/HomePage.js
index 09f11d4..c26689a 100644
--- a/client/src/pages/home/HomePage.js
+++ b/client/src/pages/home/HomePage.js
@@ -14,13 +14,13 @@ export default function HomePage (props) {
         <div id='title'>
           <div>
             <Typography variant='h1'>MealPlanner</Typography>
-            <Button variant='contained' color='primary' onClick={() => window.open('/calendar', '_self')}><Typography variant='h6' color='secondary'>Get Started</Typography></Button>
+            <Button variant='contained' size='large' color='primary' onClick={() => window.open('/calendar', '_self')}><Typography variant='body1' font color='secondary'>Get Started</Typography></Button>
           </div>
           <div id='cards'>
             <Card>
               <CardHeader
                 avatar={<Add color='primary' />}
-                title={<Typography variant='h6'>Add Meals to Calendar</Typography>}
+                title={<Typography variant='body1'>Add Meals to Calendar</Typography>}
                 subheader={<Typography variant='body2' color='textSecondary'>Input details to plan out your meals!</Typography>}
               />
               <Divider />
@@ -29,6 +29,7 @@ export default function HomePage (props) {
                 component='img'
                 src='/addmeals.png'
                 title='add meals'
+                alt='adding meals to the calendar'
                 style={{ width: 'min(400px, 100vw)' }}
               />
               <Divider />
@@ -39,7 +40,7 @@ export default function HomePage (props) {
             <Card>
               <CardHeader
                 avatar={<Edit color='primary' />}
-                title={<Typography variant='h6'>Set Ingredients You Have</Typography>}
+                title={<Typography variant='body1'>Set Ingredients You Have</Typography>}
                 subheader={<Typography variant='body2' color='textSecondary'>Your shopping list will adjust accordingly!</Typography>}
               />
               <Divider />
@@ -47,6 +48,7 @@ export default function HomePage (props) {
                 component='img'
                 src='/setings.png'
                 title='set ingredients'
+                alt='setting ingredients you already have'
                 style={{ width: 'min(400px, 100vw)' }}
               />
               <Divider />
@@ -57,7 +59,7 @@ export default function HomePage (props) {
             <Card>
               <CardHeader
                 avatar={<Visibility color='primary' />}
-                title={<Typography variant='h6'>View Shopping List</Typography>}
+                title={<Typography variant='body1'>View Shopping List</Typography>}
                 subheader={<Typography variant='body2' color='textSecondary'>Ingredients are added as needed!</Typography>}
               />
               <Divider />
@@ -65,6 +67,7 @@ export default function HomePage (props) {
                 component='img'
                 src='/shoplist.png'
                 title='view shopping list'
+                alt='viewing the shopping list'
                 style={{ width: 'min(400px, 100vw)' }}
               />
               <Divider />
@@ -79,7 +82,7 @@ export default function HomePage (props) {
                 <EventAvailable color='primary' fontSize='large' />
               </ListItemAvatar>
               <ListItemText
-                primary={<Typography variant='h6'>Stick to a Plan!</Typography>}
+                primary={<Typography variant='body1'>Stick to a Plan!</Typography>}
                 secondary={<Typography variant='body2' color='textSecondary'>Whatever diet or meal plan you follow, we make it easy for you to stick to it</Typography>}
               />
             </ListItem>
@@ -89,7 +92,7 @@ export default function HomePage (props) {
                 <MonetizationOn color='primary' fontSize='large' />
               </ListItemAvatar>
               <ListItemText
-                primary={<Typography variant='h6'>Save Money!</Typography>}
+                primary={<Typography variant='body1'>Save Money!</Typography>}
                 secondary={<Typography variant='body2' color='textSecondary'>Easily plan out what you'll eat to avoid overspending</Typography>}
               />
             </ListItem>
@@ -99,7 +102,7 @@ export default function HomePage (props) {
                 <Timer color='primary' fontSize='large' />
               </ListItemAvatar>
               <ListItemText
-                primary={<Typography variant='h6'>Save Time!</Typography>}
+                primary={<Typography variant='body1'>Save Time!</Typography>}
                 secondary={<Typography variant='body2' color='textSecondary'>When you shop, you'll know exactly what to get. No more wandering the aisles</Typography>}
               />
             </ListItem>
@@ -109,7 +112,7 @@ export default function HomePage (props) {
                 <Delete color='primary' fontSize='large' />
               </ListItemAvatar>
               <ListItemText
-                primary={<Typography variant='h6'>Avoid Waste!</Typography>}
+                primary={<Typography variant='body1'>Avoid Waste!</Typography>}
                 secondary={<Typography variant='body2' color='textSecondary'>By planning out your meals, avoid buying things you won't eat</Typography>}
               />
             </ListItem>
diff --git a/client/src/pages/profile/Profile.css b/client/src/pages/profile/Profile.css
index 5fe8b91..6c9c998 100644
--- a/client/src/pages/profile/Profile.css
+++ b/client/src/pages/profile/Profile.css
@@ -52,11 +52,19 @@
   border-radius: 15px;
 }
 
+.profileInfo h2 {
+  font-size: 2.125rem !important;
+}
+
 /* override table style */
 .MuiTable-root {
   min-width: 0;
 }
 
+.primaryBack h3 {
+  font-size: 1.25rem !important;
+}
+
 .row .delete-button {
   visibility: hidden;
 }
diff --git a/client/src/pages/profile/Profile.js b/client/src/pages/profile/Profile.js
index d1e5e15..18c7b60 100644
--- a/client/src/pages/profile/Profile.js
+++ b/client/src/pages/profile/Profile.js
@@ -34,7 +34,7 @@ export default function Profile (props) {
       <div id='profileContent'>
         <div id='profileLeft' className='profileInfo'>
           <img src='favicon.ico' alt='temporary icon' />
-          <Typography variant='h4'>{username}</Typography>
+          <Typography variant='h2'>User: {username}</Typography>
           <Typography variant='body2'>{isLoading ? '[loading...]' : meals.length } meals created</Typography>
           <Typography variant='body2'>{isLoading ? '[loading...]' : ingredients.length} ingredients used</Typography>
         </div>
@@ -44,8 +44,8 @@ export default function Profile (props) {
               <Table aria-label='Meal Table'>
                 <TableHead className='primaryBack'>
                   <TableRow>
-                    <TableCell><Typography variant='h6' color='secondary'>My Meals</Typography></TableCell>
-                    <TableCell />
+                    <TableCell><Typography variant='h3' color='secondary'>My Meals</Typography></TableCell>
+                    <TableCell component='td' aria-label='None' />
                   </TableRow>
                 </TableHead>
                 <TableBody>
@@ -54,7 +54,7 @@ export default function Profile (props) {
                       return (
                         <TableRow className='row' key={uid(meal)}>
                           <TableCell><Typography color='textPrimary'>{meal.name}</Typography></TableCell>
-                          <TableCell><IconButton className='delete-button' onClick={() => handleDeleteMeal(meal._id)}><DeleteOutlineRounded /></IconButton></TableCell>
+                          <TableCell><IconButton aria-label='delete meal' className='delete-button' onClick={() => handleDeleteMeal(meal._id)}><DeleteOutlineRounded /></IconButton></TableCell>
                         </TableRow>
                       )
                     })
@@ -68,8 +68,8 @@ export default function Profile (props) {
               <Table aria-label='Ingredient Table'>
                 <TableHead className='primaryBack'>
                   <TableRow>
-                    <TableCell><Typography variant='h6' color='secondary'>My Ingredients</Typography></TableCell>
-                    <TableCell />
+                    <TableCell><Typography variant='h3' color='secondary'>My Ingredients</Typography></TableCell>
+                    <TableCell component='td' aria-label='None' />
                   </TableRow>
                 </TableHead>
                 <TableBody>
@@ -78,7 +78,7 @@ export default function Profile (props) {
                       return (
                         <TableRow key={name} className='row'>
                           <TableCell><Typography color='textPrimary'>{name}</Typography></TableCell>
-                          <TableCell><IconButton className='delete-button' onClick={() => handleDeleteIngredient(name)}><DeleteOutlineRounded /></IconButton></TableCell>
+                          <TableCell><IconButton aria-label='delete ingredient' className='delete-button' onClick={() => handleDeleteIngredient(name)}><DeleteOutlineRounded /></IconButton></TableCell>
                         </TableRow>
                       )
                     })
@@ -95,11 +95,18 @@ export default function Profile (props) {
 
 const getData = (uid, setUsername, setIngredients, setMeals, setIsLoading) => {
   setIsLoading(true)
+  if (!uid) {
+    setUsername('not found')
+    setIngredients(['None'])
+    setMeals([{ name: 'None' }])
+    setIsLoading(false)
+    return
+  }
   getUserById(uid).then(user => {
     if (!user) {
-      setUsername('user not found')
+      setUsername('not found')
       setIngredients(['None'])
-      setMeals(['None'])
+      setMeals([{ name: 'None' }])
       setIsLoading(false)
       return
     }
