diff --git a/client/homebrew/brewRenderer/brewRenderer.jsx b/client/homebrew/brewRenderer/brewRenderer.jsx
index 4b82c6bc0a..58822fb701 100644
--- a/client/homebrew/brewRenderer/brewRenderer.jsx
+++ b/client/homebrew/brewRenderer/brewRenderer.jsx
@@ -13,7 +13,7 @@ const RenderWarnings = require('homebrewery/renderWarnings/renderWarnings.jsx');
 const NotificationPopup = require('./notificationPopup/notificationPopup.jsx');
 const Frame = require('react-frame-component').default;
 const dedent = require('dedent-tabs').default;
-const { printCurrentBrew } = require('../../../shared/helpers.js');
+const { printCurrentBrew, updatePageArray, getPageNumber } = require('../../../shared/helpers.js');
 
 const DOMPurify = require('dompurify');
 const purifyConfig = { FORCE_BODY: true, SANITIZE_DOM: false };
@@ -35,8 +35,28 @@ const BrewPage = (props)=>{
 		index    : 0,
 		...props
 	};
+
+	const pageRef = useRef();
+
+	const rootMargin = '-50% 0px';
+
+	useEffect(()=>{
+		const observer = new IntersectionObserver(
+			([entry])=>{
+				const pageNo = parseInt(entry.target.getAttribute('id').slice(1));
+				updatePageArray(entry.isIntersecting, pageNo);
+			},
+			{ rootMargin }
+		);
+		observer.observe(pageRef.current);
+		return ()=>{
+			if(pageRef.current == null) return;
+			observer.unobserve(pageRef.current);
+		};
+	}, [pageRef.current, rootMargin]);
+
 	const cleanText = props.contents; //DOMPurify.sanitize(props.contents, purifyConfig);
-	return <div className={props.className} id={`p${props.index + 1}`} >
+	return <div className={props.className} id={`p${props.index + 1}`} ref={pageRef} >
 	         <div className='columnWrapper' dangerouslySetInnerHTML={{ __html: cleanText }} />
 	       </div>;
 };
@@ -112,7 +132,8 @@ const BrewRenderer = (props)=>{
 				{props.renderer}
 			</div>
 			<div>
-				{state.viewablePageNumber + 1} / {rawPages.length}
+				{/* {state.viewablePageNumber + 1} / {rawPages.length} */}
+				{getPageNumber()} / {rawPages.length}
 			</div>
 		</div>;
 	};
diff --git a/shared/helpers.js b/shared/helpers.js
index e5c1b7769b..10390b5bbf 100644
--- a/shared/helpers.js
+++ b/shared/helpers.js
@@ -50,8 +50,42 @@ const fetchThemeBundle = async (obj, renderer, theme)=>{
 	}));
 };
 
+let pageArray = [];
+let currentPage = 1;
+
+const updatePageArray = (add, pageNo)=>{
+	// Remove page # from array
+	if(!add){
+		// If page # not in array, exit
+		if(!pageArray.includes(pageNo)) return;
+		// Update array to exclude page #
+		pageArray = pageArray.filter((el)=>{return el != pageNo;});
+		return;
+	}
+	// Add page # to array
+	// If page # already in array, exit
+	if(pageArray.includes(pageNo)) return;
+	// Add page # to array
+	pageArray.push(pageNo);
+	return;
+};
+
+const getPageNumber = ()=>{
+	if(pageArray.length == 0) return currentPage;
+	currentPage = Math.floor(pageArray.reduce((p, c)=>{p+c;}) / pageArray.length);
+	return currentPage;
+};
+
+const getVisiblePageRange = ()=>{
+	if(pageArray.length <= 3) return pageArray.join(', ');
+	return `${pageArray[0]} - ${pageArray.slice(-1)[0]}`;
+};
+
 module.exports = {
 	splitTextStyleAndMetadata,
 	printCurrentBrew,
 	fetchThemeBundle,
+	updatePageArray,
+	getPageNumber,
+	getVisiblePageRange
 };