diff --git a/src/components/OrderCardFulfillmentGroup/OrderCardFulfillmentGroup.js b/src/components/OrderCardFulfillmentGroup/OrderCardFulfillmentGroup.js
index 16271748dc..4567cee318 100644
--- a/src/components/OrderCardFulfillmentGroup/OrderCardFulfillmentGroup.js
+++ b/src/components/OrderCardFulfillmentGroup/OrderCardFulfillmentGroup.js
@@ -49,9 +49,9 @@ class OrderCardFulfillmentGroup extends Component {
 
   static defaultProps = {
     hasMoreCartItems: false,
-    loadMoreCartItems() {},
-    onChangeCartItemsQuantity() {},
-    onRemoveCartItems() {}
+    loadMoreCartItems() { },
+    onChangeCartItemsQuantity() { },
+    onRemoveCartItems() { }
   }
 
   handleItemQuantityChange = (quantity, cartItemId) => {
@@ -103,7 +103,7 @@ class OrderCardFulfillmentGroup extends Component {
               spacing={24}
             >
               <Grid item xs={6}>
-                <Typography className={classes.fulfillmentGroupCount} variant="subheading">Shipment {currentGroupCount} of {totalGroupsCount}</Typography>
+                <Typography className={classes.fulfillmentGroupCount} variant="subtitle1">Shipment {currentGroupCount} of {totalGroupsCount}</Typography>
               </Grid>
               <Grid item xs={6} className={classes.fulfillmentGroupHeaderRightColumn}>
                 {fulfillmentGroup.tracking ?
diff --git a/src/components/OrderCardHeader/OrderCardHeader.js b/src/components/OrderCardHeader/OrderCardHeader.js
index 995a685474..67b892bd9d 100644
--- a/src/components/OrderCardHeader/OrderCardHeader.js
+++ b/src/components/OrderCardHeader/OrderCardHeader.js
@@ -83,18 +83,18 @@ class OrderCardHeader extends Component {
 
     // If more than one payment method, display amount for each
     if (Array.isArray(payments) && payments.length > 1) {
-      return payments.map((payment) => <Typography variant="caption">{payment.displayName} {payment.amount.displayAmount}</Typography>);
+      return payments.map((payment, index) => <Typography key={index} variant="caption">{payment.displayName} {payment.amount.displayAmount}</Typography>);
     }
 
     // If only one payment method, do not display amount
-    return payments.map((payment) => <Typography variant="caption">{payment.displayName}</Typography>);
+    return payments.map((payment, index) => <Typography key={index} variant="caption">{payment.displayName}</Typography>);
   }
 
   renderOrderShipments() {
     const { order: { fulfillmentGroups } } = this.props;
 
     if (Array.isArray(fulfillmentGroups) && fulfillmentGroups.length) {
-      return fulfillmentGroups.map((fulfillmentGroup) => <Typography variant="caption">{fulfillmentGroup.selectedFulfillmentOption.fulfillmentMethod.carrier} - {fulfillmentGroup.selectedFulfillmentOption.fulfillmentMethod.displayName}</Typography>); // eslint-disable-line
+      return fulfillmentGroups.map((fulfillmentGroup, index) => <Typography key={index} variant="caption">{fulfillmentGroup.selectedFulfillmentOption.fulfillmentMethod.carrier} - {fulfillmentGroup.selectedFulfillmentOption.fulfillmentMethod.displayName}</Typography>); // eslint-disable-line
     }
 
     return null;
@@ -167,7 +167,7 @@ class OrderCardHeader extends Component {
               </Grid>
             </Grid>
           </section>
-          : null }
+          : null}
       </div>
     );
   }
diff --git a/src/components/ProfileAddressBook/ProfileAddressBook.js b/src/components/ProfileAddressBook/ProfileAddressBook.js
index efb299d06d..c9774f6aed 100644
--- a/src/components/ProfileAddressBook/ProfileAddressBook.js
+++ b/src/components/ProfileAddressBook/ProfileAddressBook.js
@@ -68,7 +68,7 @@ class ProfileAddressBook extends Component {
     return (
       <Grid className={classes.profileAddressBookContainer} container>
         <Grid className={classes.profileAddressBookTitle} item xs={12} md={12}>
-          <Typography variant="title">Address Book</Typography>
+          <Typography variant="h6">Address Book</Typography>
         </Grid>
         {this.renderAddressBook()}
       </Grid>
diff --git a/src/components/ProfileOrders/ProfileOrders.js b/src/components/ProfileOrders/ProfileOrders.js
index b68c3f27fa..197c4bd4a6 100644
--- a/src/components/ProfileOrders/ProfileOrders.js
+++ b/src/components/ProfileOrders/ProfileOrders.js
@@ -136,7 +136,7 @@ class ProfileOrders extends Component {
     return (
       <Grid className={classes.profileOrdersContainer} container>
         <Grid className={classes.profileOrdersTitle} item xs={12} md={12}>
-          <Typography variant="title">Orders</Typography>
+          <Typography variant="h6">Orders</Typography>
         </Grid>
         <Grid className={classes.profileOrdersSelect} item xs={12} md={12}>
           {this.renderOrderTypeSelect()}
diff --git a/src/pages/checkoutComplete.js b/src/pages/checkoutComplete.js
index d3cdc50b9f..4d1245cac2 100644
--- a/src/pages/checkoutComplete.js
+++ b/src/pages/checkoutComplete.js
@@ -63,7 +63,7 @@ class CheckoutComplete extends Component {
           <Grid item xs={false} md={3} /> {/* MUI grid doesn't have an offset. Use blank grid item instead. */}
           <Grid item xs={12} md={6}>
             <Grid item className={classes.orderThankYou} xs={12} md={12}>
-              <Typography className={classes.title} variant="title">Thank you for your order</Typography>
+              <Typography className={classes.title} variant="h6">Thank you for your order</Typography>
               <Typography variant="body1">
                 {"Your order ID is:"} <strong>{order.referenceId}</strong>
               </Typography>