diff --git a/client/homebrew/brewRenderer/headerNav/headerNav.jsx b/client/homebrew/brewRenderer/headerNav/headerNav.jsx
index e1ef56fb2..cfc10bbd6 100644
--- a/client/homebrew/brewRenderer/headerNav/headerNav.jsx
+++ b/client/homebrew/brewRenderer/headerNav/headerNav.jsx
@@ -11,9 +11,8 @@ const HeaderNav = React.forwardRef(({}, pagesRef)=>{
 		if(!pagesRef.current) return;
 
 		// Top Level Pages
-		// Pages that contain an element with a specified class will NOT have its content scanned for navigation headers
-		// e.g. cover pages, table of content pages
-		// Instead, a label will be added to the navigation at the page level
+		// Pages that contain an element with a specified class (e.g. cover pages, table of contents)
+		// will NOT have its content scanned for navigation headers, instead displaying a custom label
 		// ---
 		// The property name is class that will be used for detecting the page is a top level page
 		// The property value is a function that returns the text to be used
@@ -26,7 +25,7 @@ const HeaderNav = React.forwardRef(({}, pagesRef)=>{
 			'.toc'         : ()=>{ return 'Table of Contents'; },
 		};
 
-		const getHeaderContent = (el)=>{ return el.querySelector('h1')?.textContent; };
+		const getHeaderContent = el => el.querySelector('h1')?.textContent;
 
 		const topLevelPageSelector = Object.keys(topLevelPages).join(',');
 
@@ -49,42 +48,30 @@ const HeaderNav = React.forwardRef(({}, pagesRef)=>{
 		// }
 
 		elements.forEach((el)=>{
-			if(el.className.match(/\bpage\b/)) {
-				let text = `Page ${el.id.slice(1)}`;  // The ID of a page *should* always be equal to `p` followed by the page number
-				Object.keys(topLevelPages).every((pageType)=>{
-					if(el.querySelector(pageType)){     // If a Top Level Page, add the text result to the navigation text
-						text += ` - ${topLevelPages[pageType](el, pageType)}`;
-						return false;
-					};
-					return true;
-				});
-				navList.push({
-					depth     : 0,						// Pages are always at the least indented level
-					text      : text,
-					link      : el.id,
-					className : 'pageLink'
-				});
-				return;
-			}
-			if(el.localName.match(/^h[1-6]/)){  // Header elements H1 through H6
-				navList.push({
-					depth : el.localName[1], // Depth is set by the header level
-					text  : el.textContent,  // Use `textContent` because `innerText` is affected by rendering, e.g. 'content-visibility: auto'
-					link  : el.id
-				});
-				return;
-			}
-			navList.push({
+			const navEntry = {        // Default structure of a navList entry
 				depth : 7,              // All unmatched elements with IDs are set to the maximum depth (7)
 				text  : el.textContent, // Use `textContent` because `innerText` is affected by rendering, e.g. 'content-visibility: auto'
 				link  : el.id
-			});
-		});
-
-		return _.map(navList, (navItem, index)=>{
-			return <HeaderNavItem {...navItem} key={index} />;
+			}
+			if(el.classList.contains('page')) {
+				let text = `Page ${el.id.slice(1)}`; // Get the page # by trimming off the 'p' from the ID
+				const pageType = Object.keys(topLevelPages).find(pageType => el.querySelector(pageType));
+				if (pageType)
+					text += ` - ${topLevelPages[pageType](el, pageType)}` // If a Top Level Page, add extra label
+
+				navEntry.depth     = 0; // Pages are always at the least indented level
+				navEntry.text      = text;
+				navEntry.className = 'pageLink';
+			}
+			else if(el.localName.match(/^h[1-6]/)){  // Header elements H1 through H6
+				navEntry.depth = el.localName[1];      // Depth is set by the header level
+			}
+			navList.push(navEntry);
 		});
 
+		return _.map(navList, (navItem, index)=>
+			<HeaderNavItem {...navItem} key={index} />
+		);
 	};
 
 	return <nav className='headerNav'>
@@ -92,8 +79,7 @@ const HeaderNav = React.forwardRef(({}, pagesRef)=>{
 			{renderHeaderLinks()}
 		</ul>
 	</nav>;
-}
-);
+});
 
 const HeaderNavItem = ({ link, text, depth, className })=>{