diff --git a/client/homebrew/brewRenderer/brewRenderer.jsx b/client/homebrew/brewRenderer/brewRenderer.jsx
index 66b2e3fe2..338bcdc4e 100644
--- a/client/homebrew/brewRenderer/brewRenderer.jsx
+++ b/client/homebrew/brewRenderer/brewRenderer.jsx
@@ -81,22 +81,7 @@ const BrewRenderer = (props)=>{
 		return ()=>{window.removeEventListener('resize', updateSize);};
 	}, []);
 
-	const scrollToPage = (pageNumber) => {
-		pageNumber = _.clamp(pageNumber - 1, 0, rawPages.length - 1);
-		const iframe = document.getElementById('BrewRenderer');
-		if(iframe && iframe.contentWindow) {
-			const brewRenderer = iframe.contentWindow.document.querySelector('.brewRenderer');
-			if(brewRenderer) {
-				const pages = brewRenderer.querySelectorAll('.page');
 
-				if(pageNumber + 1 > pages.length || pageNumber < 0) {
-					console.log('page not found');
-				} else {
-					pages[pageNumber].scrollIntoView({ block: 'start' });
-				}
-			}
-		}
-	};
 
 	const updateSize = ()=>{
 		setState((prevState)=>({
@@ -247,7 +232,7 @@ const BrewRenderer = (props)=>{
 				<NotificationPopup />
 			</div>
 
-			<ToolBar onZoomChange={handleZoom} currentPage={state.currentPageNumber} onPageChange={scrollToPage} totalPages={rawPages.length}/>
+			<ToolBar onZoomChange={handleZoom} currentPage={state.currentPageNumber}  totalPages={rawPages.length}/>
 
 
 			{/*render in iFrame so broken code doesn't crash the site.*/}
diff --git a/client/homebrew/brewRenderer/toolBar/toolBar.jsx b/client/homebrew/brewRenderer/toolBar/toolBar.jsx
index d3184d025..e20f0820f 100644
--- a/client/homebrew/brewRenderer/toolBar/toolBar.jsx
+++ b/client/homebrew/brewRenderer/toolBar/toolBar.jsx
@@ -29,6 +29,23 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 		setPageInput(page);
 	};
 
+	const scrollToPage = (pageNumber) => {
+		pageNumber = _.clamp(pageNumber - 1, 0, totalPages - 1);
+		const iframe = document.getElementById('BrewRenderer');
+		if(iframe && iframe.contentWindow) {
+			const brewRenderer = iframe.contentWindow.document.querySelector('.brewRenderer');
+			if(brewRenderer) {
+				const pages = brewRenderer.querySelectorAll('.page');
+
+				if(pageNumber + 1 > pages.length || pageNumber < 0) {
+					console.log('page not found');
+				} else {
+					pages[pageNumber].scrollIntoView({ block: 'start' });
+				}
+			}
+		}
+	};
+
 	return (
 		<div className='toolBar'>
 			<div className='group'>
@@ -71,7 +88,7 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 				<div className='tool'>
 					<button
 						className='previousPage'
-						onClick={()=>onPageChange(pageInput - 1)}
+						onClick={()=>scrollToPage(pageInput - 1)}
 						disabled={pageInput <= 1}
 					>
 						<i className='fas fa-arrow-left'></i>
@@ -87,8 +104,8 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 					value={pageInput}
 					onChange={(e)=>{
 						handlePageChange(e.target.value == false ? e.target.value : parseInt(e.target.value));}}
-					onBlur={()=>onPageChange(pageInput)}
-					onKeyDown={(e)=>{e.key == 'Enter' ? onPageChange(pageInput) : null;}}
+					onBlur={()=>scrollToPage(pageInput)}
+					onKeyDown={(e)=>{e.key == 'Enter' ? scrollToPage(pageInput) : null;}}
 				/>
 
 				<span id='page-count'>/ {totalPages}</span>
@@ -97,7 +114,7 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 					<button
 						className='nextPage'
 						// onClick={()=>{setPageInput((pageInput)=>parseInt(pageInput) + 1)}}
-						onClick={()=>onPageChange(pageInput + 1)}
+						onClick={()=>scrollToPage(pageInput + 1)}
 						disabled={pageInput >= totalPages}
 					>
 						<i className='fas fa-arrow-right'></i>