diff --git a/client/homebrew/brewRenderer/toolBar/toolBar.jsx b/client/homebrew/brewRenderer/toolBar/toolBar.jsx
index 598981eaa..ce60971aa 100644
--- a/client/homebrew/brewRenderer/toolBar/toolBar.jsx
+++ b/client/homebrew/brewRenderer/toolBar/toolBar.jsx
@@ -15,7 +15,9 @@ const ToolBar = ({ displayOptions, onDisplayOptionsChange, visiblePages, totalPa
 	const [toolsVisible, setToolsVisible] = useState(true);
 
 	useEffect(()=>{
-		setPageNum(formatVisiblePages(visiblePages));
+		// format multiple visible pages as a range (e.g. "150-153")
+		const pageRange = visiblePages.length === 1 ? `${visiblePages[0]}` : `${visiblePages[0]} - ${visiblePages.at(-1)}`;
+		setPageNum(pageRange);
 	}, [visiblePages]);
 
 	const handleZoomButton = (zoom)=>{
@@ -72,11 +74,6 @@ const ToolBar = ({ displayOptions, onDisplayOptionsChange, visiblePages, totalPa
 		return deltaZoom;
 	};
 
-	// format the visible pages into a range (e.g. "150-153")
-	const formatVisiblePages = (pages)=>{
-		return pages.length === 1 ? `${pages[0]}` : `${pages[0]} - ${pages.at(-1)}`;
-	};
-
 	return (
 		<div id='preview-toolbar' className={`toolBar ${toolsVisible ? 'visible' : 'hidden'}`} role='toolbar'>
 			<button className='toggleButton' title={`${toolsVisible ? 'Hide' : 'Show'} Preview Toolbar`} onClick={()=>{setToolsVisible(!toolsVisible);}}><i className='fas fa-glasses' /></button>