diff --git a/client/homebrew/brewRenderer/brewRenderer.jsx b/client/homebrew/brewRenderer/brewRenderer.jsx
index 9d9d585e3..9cbe824fa 100644
--- a/client/homebrew/brewRenderer/brewRenderer.jsx
+++ b/client/homebrew/brewRenderer/brewRenderer.jsx
@@ -88,7 +88,8 @@ const BrewRenderer = (props)=>{
                 iframe.contentWindow.document.querySelector('.brewRenderer');
             if (brewRenderer) {
                 const pages = brewRenderer.querySelectorAll('.page');
-                if (pageNumber > pages.length) {
+                if (pageNumber + 1 > pages.length) {
+					console.log(pageNumber, pages.length);
                     console.log('page not found');
                 } else {
                     pages[pageNumber].scrollIntoView({ block: 'start' });
@@ -234,6 +235,11 @@ const BrewRenderer = (props)=>{
 		);
 	}
 
+	const handlePageChange = (pageNumber) => {
+        // Scroll to the desired page
+        scrollToPage(pageNumber);
+    };
+
 	return (
 		<>
 			{/*render dummy page while iFrame is mounting.*/}
@@ -251,7 +257,7 @@ const BrewRenderer = (props)=>{
 				contentDidMount={frameDidMount}
 				onClick={()=>{emitClick();}}
 			>
-				<ToolBar updateZoom={updateZoom} />
+				<ToolBar updateZoom={updateZoom} currentPage={state.viewablePageNumber} 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 60e1a437e..f9879428c 100644
--- a/client/homebrew/brewRenderer/toolBar/toolBar.jsx
+++ b/client/homebrew/brewRenderer/toolBar/toolBar.jsx
@@ -3,18 +3,33 @@ const React = require('react');
 const { useState, useRef, useEffect } = React;
 const _ = require('lodash');
 
-const ToolBar = ({updateZoom}) => {
+const ToolBar = ({ updateZoom, currentPage, onPageChange, totalPages }) => {
     const [state, setState] = useState({
-        currentPage: 1,
-        totalPages: 10,
+        currentPage: currentPage,
+        totalPages: totalPages,
         zoomLevel: 100,
     });
 
+    const [pageNumberInput, setPageNumberInput] = useState(
+        state.currentPage + 1
+    );
+    const [zoomInput, setZoomInput] = useState(state.zoomLevel);
+
     useEffect(() => {
         console.log(`Zoom to: ${state.zoomLevel}`);
         updateZoom(state.zoomLevel);
     }, [state.zoomLevel]);
 
+    // Update currentPage whenever page prop changes
+    useEffect(() => {
+        console.log(`page number from props ${currentPage}`);
+        setState((prevState) => ({
+            ...prevState,
+            currentPage: currentPage,
+        }));
+        setPageNumberInput(currentPage + 1);
+    }, [currentPage]);
+
     const setZoomLevel = (direction) => {
         let zoomLevel = state.zoomLevel;
         if (direction === 'in') {
@@ -29,17 +44,22 @@ const ToolBar = ({updateZoom}) => {
         }));
     };
 
-    const scrollToPage = (direction) => {
-        let currentPage = state.currentPage;
-        if (direction === 'next') {
-            currentPage += 1;
-        } else {
-            currentPage = currentPage - 1;
+    const handleInputChange = (value, type) => {
+        // Remove the "%" symbol from the input value
+        const newValue = parseInt(value.replace('%', ''), 10);
+
+        // Check the type of input (zoom or page)
+        if (type === 'zoom') {
+            // Check if zoom level is within the allowed range
+            if (newValue >= 10 && newValue <= 300) {
+                setZoomInput(newValue + '%'); // Add "%" back to the value
+            }
+        } else if (type === 'page') {
+            // Check if page number is within the allowed range
+            if (newValue >= 1 && newValue <= totalPages) {
+                setPageNumberInput(newValue);
+            }
         }
-        setState((prevState) => ({
-            ...prevState,
-            currentPage,
-        }));
     };
 
     return (
@@ -53,7 +73,27 @@ const ToolBar = ({updateZoom}) => {
                 </button>
             </div>
 
-            <span className="currentZoom">{state.zoomLevel}%</span>
+            <div className="tool">
+                <input
+                    type="number"
+                    name="zoom"
+                    min={10}
+                    max={300}
+                    value={zoomInput}
+                    onChange={(e) => handleInputChange(e.target.value, 'zoom')}
+                    onBlur={(e) => {
+                        const newZoomLevel = parseInt(
+                            e.target.value.replace('%', ''),
+                            10
+                        );
+                        if (newZoomLevel !== state.zoomLevel) {
+                            updateZoom(newZoomLevel);
+                        }
+                    }}
+                />
+                <span>%</span>
+            </div>
+
             <div className="tool">
                 <button
                     onClick={() => setZoomLevel('out')}
@@ -66,19 +106,38 @@ const ToolBar = ({updateZoom}) => {
             <div className="tool">
                 <button
                     className="previousPage"
-                    onClick={() => scrollToPage('previous')}
-                    disabled={state.currentPage <= 1}
+                    onClick={() => {
+                        console.log(`page is ${state.currentPage}`);
+                        onPageChange(state.currentPage - 1);
+                    }}
+                    disabled={state.currentPage === 0}
                 >
                     <i className="fas fa-arrow-left"></i>
                 </button>
             </div>
 
-            <span className="currentPage">{state.currentPage}</span>
+            <input
+                type="number"
+                name="page"
+                min={1}
+                max={state.totalPages}
+                id="pageInput"
+                value={pageNumberInput}
+                onChange={(e) => handleInputChange(e.target.value, 'page')}
+                onBlur={(e) => {
+                    parseInt(pageNumberInput) === state.currentPage + 1 ||
+                        onPageChange(parseInt(pageNumberInput) - 1);
+                }}
+            />
+
             <div className="tool">
                 <button
                     className="nextPage"
-                    onClick={() => scrollToPage('next')}
-                    disabled={state.currentPage >= 10}
+                    onClick={() => {
+                        console.log(`page is ${state.currentPage}`);
+                        onPageChange(state.currentPage + 1);
+                    }}
+                    disabled={state.currentPage + 1 === state.totalPages}
                 >
                     <i className="fas fa-arrow-right"></i>
                 </button>
diff --git a/client/homebrew/brewRenderer/toolBar/toolBar.less b/client/homebrew/brewRenderer/toolBar/toolBar.less
index 1d3ae5205..db20a51a6 100644
--- a/client/homebrew/brewRenderer/toolBar/toolBar.less
+++ b/client/homebrew/brewRenderer/toolBar/toolBar.less
@@ -13,12 +13,12 @@
     z-index: 1;
     display: flex;
     justify-content: center;
-    align-items: baseline;
+    align-items: center;
     column-gap: 15px;
     row-gap: 5px;
     flex-wrap: wrap;
 
-    span {
+    input {
         background: #eee;
         font-family: 'Open Sans', sans-serif;
         text-transform: uppercase;
@@ -27,7 +27,7 @@
         color: #000;
         padding: 2px 5px;
         border-radius: 7px;
-        width: 50px;
+        height:1.5em;
     }
 
     .tool {