diff --git a/www/src/components/header/Header.tsx b/www/src/components/header/Header.tsx
index 142ba913e2..8e955a1a7b 100644
--- a/www/src/components/header/Header.tsx
+++ b/www/src/components/header/Header.tsx
@@ -14,7 +14,7 @@ import Menu from '../Menu';
 export interface IHeaderProps {
   siteTitle: string,
   showMinimizedTitle?: boolean,
-  tabName: string,
+  tabName?: string,
 }
 
 function Header({ siteTitle, showMinimizedTitle, tabName }: IHeaderProps) {
@@ -74,12 +74,13 @@ function Header({ siteTitle, showMinimizedTitle, tabName }: IHeaderProps) {
 Header.propTypes = {
   siteTitle: PropTypes.string,
   showMinimizedTitle: PropTypes.bool,
-  tabName: PropTypes.string.isRequired,
+  tabName: PropTypes.string,
 };
 
 Header.defaultProps = {
   siteTitle: '',
   showMinimizedTitle: false,
+  tabName: undefined,
 };
 
 export default Header;
diff --git a/www/src/pages/foundations/elevation.jsx b/www/src/pages/foundations/elevation.jsx
index 0b696ed65d..6d54ccf9c5 100644
--- a/www/src/pages/foundations/elevation.jsx
+++ b/www/src/pages/foundations/elevation.jsx
@@ -14,6 +14,7 @@ import SEO from '../../components/SEO';
 import Layout from '../../components/PageLayout';
 import { SettingsContext } from '../../context/SettingsContext';
 import { sendUserAnalyticsEvent, SHADOW_GENERATOR_LAYER_EVENTS } from '../../../segment-events';
+import upperFirstLetter from '../../utils/helpers';
 
 const boxShadowSides = ['down', 'up', 'right', 'left', 'centered'];
 const boxShadowLevels = [1, 2, 3, 4, 5];
@@ -280,7 +281,7 @@ export default function ElevationPage({ pageContext }) {
 
   const sideTitle = boxShadowSides.map(side => (
     <p key={side} className="pgn-doc__box-shadow-side-title h3">
-      {side.charAt(0).toUpperCase() + side.substring(1)}
+      {upperFirstLetter(side)}
     </p>
   ));
 
diff --git a/www/src/templates/component-page-template.tsx b/www/src/templates/component-page-template.tsx
index 9e3c80d5b1..0319d2986a 100644
--- a/www/src/templates/component-page-template.tsx
+++ b/www/src/templates/component-page-template.tsx
@@ -1,7 +1,5 @@
 /* eslint-disable react/no-unstable-nested-components */
-import React, {
-  useContext, useEffect, useState,
-} from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { graphql, Link, navigate } from 'gatsby';
 import { MDXProvider } from '@mdx-js/react';
@@ -141,7 +139,8 @@ export default function PageTemplate({
     const isCurrentTab = selectedTab === mdx.frontmatter.tabName;
     const hasSelectedTab = componentTabsData
       .some((availableTabs) => (
-        Array.isArray(availableTabs) ? availableTabs.includes(selectedTab) : availableTabs === selectedTab));
+        Array.isArray(availableTabs)
+          ? availableTabs.includes(selectedTab) : availableTabs === selectedTab));
 
     const componentBaseUrl = componentUrl.replace(`/${tabName}`, '');