diff --git a/client/homebrew/brewRenderer/brewRenderer.jsx b/client/homebrew/brewRenderer/brewRenderer.jsx
index 9cbe824fa..c15e081f1 100644
--- a/client/homebrew/brewRenderer/brewRenderer.jsx
+++ b/client/homebrew/brewRenderer/brewRenderer.jsx
@@ -67,6 +67,7 @@ const BrewRenderer = (props)=>{
 		isMounted          : false,
 		visibility         : 'hidden',
 		zoom			   : 100,
+		currentPageNumber  : 1,
 	});
 
 	const mainRef  = useRef(null);
@@ -88,7 +89,8 @@ const BrewRenderer = (props)=>{
                 iframe.contentWindow.document.querySelector('.brewRenderer');
             if (brewRenderer) {
                 const pages = brewRenderer.querySelectorAll('.page');
-                if (pageNumber + 1 > pages.length) {
+				console.log(pageNumber);
+                if (pageNumber + 1 > pages.length || pageNumber < 0) {
 					console.log(pageNumber, pages.length);
                     console.log('page not found');
                 } else {
@@ -111,6 +113,18 @@ const BrewRenderer = (props)=>{
 			...prevState,
 			viewablePageNumber : Math.floor(target.scrollTop / target.scrollHeight * rawPages.length)
 		}));
+
+		getCurrentPage(e);
+	};
+
+	const getCurrentPage = (e) => {
+		const target = e.target;
+		const currentPageNumber = Math.ceil(target.scrollTop / target.scrollHeight * rawPages.length);
+		
+		setState((prevState) => ({
+			...prevState,
+			currentPageNumber: currentPageNumber || 1
+		}));
 	};
 
 	const isInView = (index)=>{
@@ -257,7 +271,7 @@ const BrewRenderer = (props)=>{
 				contentDidMount={frameDidMount}
 				onClick={()=>{emitClick();}}
 			>
-				<ToolBar updateZoom={updateZoom} currentPage={state.viewablePageNumber} onPageChange={handlePageChange} totalPages={rawPages.length}/>
+				<ToolBar updateZoom={updateZoom} currentPage={state.currentPageNumber} onPageChange={handlePageChange} totalPages={rawPages.length}/>
 				<div className={'brewRenderer'}
 					onScroll={handleScroll}
 					onKeyDown={handleControlKeys}
diff --git a/client/homebrew/brewRenderer/toolBar/toolBar.jsx b/client/homebrew/brewRenderer/toolBar/toolBar.jsx
index d6b39ffce..95aca9163 100644
--- a/client/homebrew/brewRenderer/toolBar/toolBar.jsx
+++ b/client/homebrew/brewRenderer/toolBar/toolBar.jsx
@@ -11,7 +11,7 @@ const ToolBar = ({ updateZoom, currentPage, onPageChange, totalPages }) => {
     });
 
     const [pageNumberInput, setPageNumberInput] = useState(
-        state.currentPage + 1
+        state.currentPage
     );
     const [zoomInput, setZoomInput] = useState(state.zoomLevel);
 
@@ -22,12 +22,11 @@ const ToolBar = ({ updateZoom, currentPage, onPageChange, totalPages }) => {
 
     // Update currentPage whenever page prop changes
     useEffect(() => {
-        console.log(`page number from props ${currentPage}`);
         setState((prevState) => ({
             ...prevState,
             currentPage: currentPage,
         }));
-        setPageNumberInput(currentPage + 1);
+        setPageNumberInput(currentPage);
     }, [currentPage]);
 
     const setZoomLevel = (direction) => {
@@ -113,9 +112,9 @@ const ToolBar = ({ updateZoom, currentPage, onPageChange, totalPages }) => {
                     className="previousPage"
                     onClick={() => {
                         console.log(`page is ${state.currentPage}`);
-                        onPageChange(state.currentPage - 1);
+                        onPageChange(state.currentPage - 2);
                     }}
-                    disabled={state.currentPage === 0}
+                    disabled={state.currentPage <= 1}
                 >
                     <i className="fas fa-arrow-left"></i>
                 </button>
@@ -130,7 +129,7 @@ const ToolBar = ({ updateZoom, currentPage, onPageChange, totalPages }) => {
                 value={pageNumberInput}
                 onChange={(e) => handleInputChange(e.target.value, 'page')}
                 onBlur={(e) => {
-                    parseInt(pageNumberInput) === state.currentPage + 1 ||
+                    parseInt(pageNumberInput) === state.currentPage ||
                         onPageChange(parseInt(pageNumberInput) - 1);
                 }}
                 onKeyPress={(e) => {
@@ -145,7 +144,7 @@ const ToolBar = ({ updateZoom, currentPage, onPageChange, totalPages }) => {
                     className="nextPage"
                     onClick={() => {
                         console.log(`page is ${state.currentPage}`);
-                        onPageChange(state.currentPage + 1);
+                        onPageChange(state.currentPage);
                     }}
                     disabled={state.currentPage + 1 === state.totalPages}
                 >