diff --git a/client/homebrew/brewRenderer/brewRenderer.less b/client/homebrew/brewRenderer/brewRenderer.less
index 83834eddb..3be34caad 100644
--- a/client/homebrew/brewRenderer/brewRenderer.less
+++ b/client/homebrew/brewRenderer/brewRenderer.less
@@ -8,6 +8,14 @@
 	:where(.pages) {
 		margin : 30px 0px;
 
+		&.book-mode {
+			display: grid; 
+			grid-template-columns: repeat(2, auto); 
+			grid-template-rows: repeat(3, auto); 
+			gap: 10px 10px; 
+			justify-content: center;
+		}
+
 		& > :where(.page) {
 			width         : 215.9mm;
 			height        : 279.4mm;
diff --git a/client/homebrew/brewRenderer/toolBar/toolBar.jsx b/client/homebrew/brewRenderer/toolBar/toolBar.jsx
index 07d6cfb70..7c3c8e68e 100644
--- a/client/homebrew/brewRenderer/toolBar/toolBar.jsx
+++ b/client/homebrew/brewRenderer/toolBar/toolBar.jsx
@@ -12,6 +12,7 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 
 	const [zoomLevel, setZoomLevel] = useState(100);
 	const [pageInput, setPageInput] = useState(currentPage);
+	const [arrangement, setArrangement] = useState('single');
 
 	useEffect(()=>{
 		onZoomChange(zoomLevel);
@@ -86,6 +87,13 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 		return deltaZoom;
 	};
 
+	const setBookMode = ()=>{
+		const iframe = document.getElementById('BrewRenderer');
+		const pagesContainer = iframe.contentWindow.document.getElementsByClassName('pages')[0];
+		pagesContainer.classList.toggle('book-mode');
+		pagesContainer.firstChild.style.gridColumnStart = '2' ;
+	};
+
 	return (
 		<div className='toolBar'>
 			<div className='group'>
@@ -137,6 +145,16 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 				</button>
 			</div>
 
+			<div className='group'>
+				<button
+					id='book-mode'
+					className='tool'
+					onClick={()=>setBookMode()}
+				>
+					{arrangement}
+				</button>
+			</div>
+
 			<div className='group'>
 				<button
 					id='previous-page'