diff --git a/client/homebrew/brewRenderer/toolBar/toolBar.jsx b/client/homebrew/brewRenderer/toolBar/toolBar.jsx
index 5043b89c8..37cfcb6d7 100644
--- a/client/homebrew/brewRenderer/toolBar/toolBar.jsx
+++ b/client/homebrew/brewRenderer/toolBar/toolBar.jsx
@@ -6,160 +6,160 @@ const maxZoom = 300;
 const minZoom = 10;
 const zoomStep = 10;
 
-const ToolBar = ({ updateZoom, currentPage, onPageChange, totalPages }) => {
-    const [state, setState] = useState({
-        currentPage: currentPage,
-        totalPages: totalPages,
-        zoomLevel: 100,
-        pageNumberInput: currentPage,
-        zoomInput: 100,
-    });
+const ToolBar = ({ updateZoom, currentPage, onPageChange, totalPages })=>{
+	const [state, setState] = useState({
+		currentPage     : currentPage,
+		totalPages      : totalPages,
+		zoomLevel       : 100,
+		pageNumberInput : currentPage,
+		zoomInput       : 100,
+	});
 
-    useEffect(() => {
-        updateZoom(state.zoomLevel);
-    }, [state.zoomLevel]);
+	useEffect(()=>{
+		updateZoom(state.zoomLevel);
+	}, [state.zoomLevel]);
 
-    useEffect(() => {
-        setState((prevState) => ({
-            ...prevState,
-            currentPage: currentPage,
-            pageNumberInput: currentPage,
-        }));
-    }, [currentPage]);
+	useEffect(()=>{
+		setState((prevState)=>({
+			...prevState,
+			currentPage     : currentPage,
+			pageNumberInput : currentPage,
+		}));
+	}, [currentPage]);
 
-    const setZoomLevel = (direction) => {
-        let zoomLevel = state.zoomLevel;
-        if (direction === 'in') {
-            zoomLevel += zoomStep;
-        } else {
-            zoomLevel -= zoomStep;
-        }
+	const setZoomLevel = (direction)=>{
+		let zoomLevel = state.zoomLevel;
+		if(direction === 'in') {
+			zoomLevel += zoomStep;
+		} else {
+			zoomLevel -= zoomStep;
+		}
 
-        setState((prevState) => ({
-            ...prevState,
-            zoomLevel: zoomLevel,
-            zoomInput: zoomLevel,
-        }));
-    };
+		setState((prevState)=>({
+			...prevState,
+			zoomLevel : zoomLevel,
+			zoomInput : zoomLevel,
+		}));
+	};
 
-    const handleInputChange = (value, type) => {
-        const newValue = parseInt(value, 10);
+	const handleInputChange = (value, type)=>{
+		const newValue = parseInt(value, 10);
 
-        if (type === 'zoom' && newValue >= minZoom && newValue <= maxZoom) {
-            setState((prevState) => ({
-                ...prevState,
-                zoomInput: newValue,
-            }));
-        } else if (type === 'page' && newValue >= 1 && newValue <= totalPages) {
-            setState((prevState) => ({
-                ...prevState,
-                pageNumberInput: newValue,
-            }));
-        }
-    };
+		if(type === 'zoom' && newValue >= minZoom && newValue <= maxZoom) {
+			setState((prevState)=>({
+				...prevState,
+				zoomInput : newValue,
+			}));
+		} else if(type === 'page' && newValue >= 1 && newValue <= totalPages) {
+			setState((prevState)=>({
+				...prevState,
+				pageNumberInput : newValue,
+			}));
+		}
+	};
 
-    return (
-        <div className="toolBar">
-            <div className="tool">
-                <button
-                    onClick={() => setZoomLevel('out')}
-                    disabled={state.zoomLevel <= minZoom}
-                >
+	return (
+		<div className='toolBar'>
+			<div className='tool'>
+				<button
+					onClick={()=>setZoomLevel('out')}
+					disabled={state.zoomLevel <= minZoom}
+				>
                     Zoom Out
-                </button>
-            </div>
-            <div className="tool">
-                <input
-                    className="slider"
-                    type="range"
-                    name="zoom"
-                    list="zoomLevels"
-                    min={minZoom}
-                    max={maxZoom}
-                    step={zoomStep}
-                    value={state.zoomInput}
-                    onChange={(e) => handleInputChange(e.target.value, 'zoom')}
-                    onMouseUp={(e) => {
-                        const newZoomLevel = parseInt(e.target.value, 10);
-                        if (newZoomLevel !== state.zoomLevel) {
-                            setState((prevState) => ({
-                                ...prevState,
-                                zoomLevel: newZoomLevel,
-                                zoomInput: newZoomLevel,
-                            }));
-                            updateZoom(newZoomLevel);
-                        }
-                    }}
-                />
-                <datalist id="zoomLevels">
-                    {Array.from(
-                        {
-                            length:
+				</button>
+			</div>
+			<div className='tool'>
+				<input
+					className='slider'
+					type='range'
+					name='zoom'
+					list='zoomLevels'
+					min={minZoom}
+					max={maxZoom}
+					step={zoomStep}
+					value={state.zoomInput}
+					onChange={(e)=>handleInputChange(e.target.value, 'zoom')}
+					onMouseUp={(e)=>{
+						const newZoomLevel = parseInt(e.target.value, 10);
+						if(newZoomLevel !== state.zoomLevel) {
+							setState((prevState)=>({
+								...prevState,
+								zoomLevel : newZoomLevel,
+								zoomInput : newZoomLevel,
+							}));
+							updateZoom(newZoomLevel);
+						}
+					}}
+				/>
+				<datalist id='zoomLevels'>
+					{Array.from(
+						{
+							length :
                                 Math.floor((maxZoom - minZoom) / zoomStep) + 1,
-                        },
-                        (_, i) => minZoom + i * zoomStep
-                    ).map((option) => (
-                        <option key={option} value={option} />
-                    ))}
-                </datalist>
-            </div>
+						},
+						(_, i)=>minZoom + i * zoomStep
+					).map((option)=>(
+						<option key={option} value={option} />
+					))}
+				</datalist>
+			</div>
 
-            <div className="tool">
-                <button
-                    onClick={() => setZoomLevel('in')}
-                    disabled={state.zoomLevel >= maxZoom}
-                >
+			<div className='tool'>
+				<button
+					onClick={()=>setZoomLevel('in')}
+					disabled={state.zoomLevel >= maxZoom}
+				>
                     Zoom In
-                </button>
-            </div>
-            <div className="tool">
-                <button
-                    className="previousPage"
-                    onClick={() => {
-                        console.log(`page is ${state.currentPage}`);
-                        onPageChange(state.currentPage - 2);
-                    }}
-                    disabled={state.currentPage <= 1}
-                >
-                    <i className="fas fa-arrow-left"></i>
-                </button>
-            </div>
+				</button>
+			</div>
+			<div className='tool'>
+				<button
+					className='previousPage'
+					onClick={()=>{
+						console.log(`page is ${state.currentPage}`);
+						onPageChange(state.currentPage - 2);
+					}}
+					disabled={state.currentPage <= 1}
+				>
+					<i className='fas fa-arrow-left'></i>
+				</button>
+			</div>
 
-            <input
-                type="number"
-                name="page"
-                min={1}
-                max={state.totalPages}
-                id="pageInput"
-                value={state.pageNumberInput}
-                onChange={(e) => handleInputChange(e.target.value, 'page')}
-                onBlur={(e) => {
-                    parseInt(state.pageNumberInput) === state.currentPage ||
+			<input
+				type='number'
+				name='page'
+				min={1}
+				max={state.totalPages}
+				id='pageInput'
+				value={state.pageNumberInput}
+				onChange={(e)=>handleInputChange(e.target.value, 'page')}
+				onBlur={(e)=>{
+					parseInt(state.pageNumberInput) === state.currentPage ||
                         onPageChange(parseInt(state.pageNumberInput) - 1);
-                }}
-                onKeyPress={(e) => {
-                    if (e.key === 'Enter') {
-                        e.target.blur();
-                    }
-                }}
-            />
+				}}
+				onKeyPress={(e)=>{
+					if(e.key === 'Enter') {
+						e.target.blur();
+					}
+				}}
+			/>
 
-            <div className="tool">
-                <button
-                    className="nextPage"
-                    onClick={() => {
-                        console.log(
-                            `page is ${state.currentPage} and i move to ${state.currentPage}`
-                        );
-                        onPageChange(state.currentPage);
-                    }}
-                    disabled={state.currentPage >= state.totalPages}
-                >
-                    <i className="fas fa-arrow-right"></i>
-                </button>
-            </div>
-        </div>
-    );
+			<div className='tool'>
+				<button
+					className='nextPage'
+					onClick={()=>{
+						console.log(
+							`page is ${state.currentPage} and i move to ${state.currentPage}`
+						);
+						onPageChange(state.currentPage);
+					}}
+					disabled={state.currentPage >= state.totalPages}
+				>
+					<i className='fas fa-arrow-right'></i>
+				</button>
+			</div>
+		</div>
+	);
 };
 
 module.exports = ToolBar;