diff --git a/client/homebrew/brewRenderer/toolBar/toolBar.jsx b/client/homebrew/brewRenderer/toolBar/toolBar.jsx
index fb3b62067..d83fa78f9 100644
--- a/client/homebrew/brewRenderer/toolBar/toolBar.jsx
+++ b/client/homebrew/brewRenderer/toolBar/toolBar.jsx
@@ -11,6 +11,7 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 
 	const [zoomLevel, setZoomLevel] = useState(100);
 	const [pageNum, setPageNum]     = useState(currentPage);
+	const [toolsVisible, setToolsVisible] = useState(true);
 
 	useEffect(()=>{
 		onZoomChange(zoomLevel);
@@ -66,8 +67,9 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 		return deltaZoom;
 	};
 
-	return (
-		<div className='toolBar'>
+	return (		
+		<div className={`toolBar ${toolsVisible ? 'visible' : 'hidden'}`}>
+			<button className='toggleButton' title={`${toolsVisible ? 'Hide' : 'Show'} Preview Toolbar`} onClick={()=>{setToolsVisible(!toolsVisible)}}><i className='fas fa-glasses' /></button>
 			{/*v=====----------------------< Zoom Controls >---------------------=====v*/}
 			<div className='group'>
 				<button
diff --git a/client/homebrew/brewRenderer/toolBar/toolBar.less b/client/homebrew/brewRenderer/toolBar/toolBar.less
index d565ca7d4..3bed0eeda 100644
--- a/client/homebrew/brewRenderer/toolBar/toolBar.less
+++ b/client/homebrew/brewRenderer/toolBar/toolBar.less
@@ -15,6 +15,10 @@
 	font-family      : 'Open Sans', sans-serif;
 	color            : #CCCCCC;
 	background-color : #555555;
+	& > *:not(.toggleButton) {
+		opacity: 1;
+		transition: all .2s ease;
+	}
 
 	.group {
 		box-sizing       : border-box;
@@ -100,4 +104,25 @@
 			font-size:1.2em;
 		}
 	}
+
+	&.hidden {
+		width: 32px;
+		transition: all .3s ease;
+		flex-wrap:nowrap;
+		overflow: hidden;
+		background-color: unset;
+		opacity: .5;
+		& > *:not(.toggleButton) {
+			opacity: 0;
+			transition: all .2s ease;
+		}
+	}
+}
+
+button.toggleButton {
+	z-index : 5;
+	position:absolute;
+	left: 0;
+	width: 32px;
+	min-width: unset;
 }
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index ed0cbf1f1..473ea3834 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -51,7 +51,7 @@
       },
       "devDependencies": {
         "@stylistic/stylelint-plugin": "^3.0.1",
-        "eslint": "^9.9.1",
+        "eslint": "^9.10.0",
         "eslint-plugin-jest": "^28.8.3",
         "eslint-plugin-react": "^7.35.2",
         "globals": "^15.9.0",
@@ -2073,9 +2073,9 @@
       }
     },
     "node_modules/@eslint/js": {
-      "version": "9.9.1",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.9.1.tgz",
-      "integrity": "sha512-xIDQRsfg5hNBqHz04H1R3scSVwmI+KUbqjsQKHKQ1DAUSaUjYPReZZmS/5PNiKu1fUvzDd6H7DEDKACSEhu+TQ==",
+      "version": "9.10.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.10.0.tgz",
+      "integrity": "sha512-fuXtbiP5GWIn8Fz+LWoOMVf/Jxm+aajZYkhi6CuEm4SxymFM+eUWzbO9qXT+L0iCkL5+KGYMCSGxo686H19S1g==",
       "dev": true,
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -2090,6 +2090,18 @@
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
+    "node_modules/@eslint/plugin-kit": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.1.0.tgz",
+      "integrity": "sha512-autAXT203ixhqei9xt+qkYOvY8l6LAFIdT2UXc/RPNeUVfqRF1BV94GTJyVPFKT8nFM6MyVJhjLj9E8JWvf5zQ==",
+      "dev": true,
+      "dependencies": {
+        "levn": "^0.4.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
     "node_modules/@googleapis/drive": {
       "version": "8.14.0",
       "resolved": "https://registry.npmjs.org/@googleapis/drive/-/drive-8.14.0.tgz",
@@ -5819,16 +5831,17 @@
       }
     },
     "node_modules/eslint": {
-      "version": "9.9.1",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.9.1.tgz",
-      "integrity": "sha512-dHvhrbfr4xFQ9/dq+jcVneZMyRYLjggWjk6RVsIiHsP8Rz6yZ8LvZ//iU4TrZF+SXWG+JkNF2OyiZRvzgRDqMg==",
+      "version": "9.10.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.10.0.tgz",
+      "integrity": "sha512-Y4D0IgtBZfOcOUAIQTSXBKoNGfY0REGqHJG6+Q81vNippW5YlKjHFj4soMxamKK1NXHUWuBZTLdU3Km+L/pcHw==",
       "dev": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.11.0",
         "@eslint/config-array": "^0.18.0",
         "@eslint/eslintrc": "^3.1.0",
-        "@eslint/js": "9.9.1",
+        "@eslint/js": "9.10.0",
+        "@eslint/plugin-kit": "^0.1.0",
         "@humanwhocodes/module-importer": "^1.0.1",
         "@humanwhocodes/retry": "^0.3.0",
         "@nodelib/fs.walk": "^1.2.8",
@@ -5851,7 +5864,6 @@
         "is-glob": "^4.0.0",
         "is-path-inside": "^3.0.3",
         "json-stable-stringify-without-jsonify": "^1.0.1",
-        "levn": "^0.4.1",
         "lodash.merge": "^4.6.2",
         "minimatch": "^3.1.2",
         "natural-compare": "^1.4.0",
diff --git a/package.json b/package.json
index 8248f4304..67a9e542f 100644
--- a/package.json
+++ b/package.json
@@ -126,7 +126,7 @@
   },
   "devDependencies": {
     "@stylistic/stylelint-plugin": "^3.0.1",
-    "eslint": "^9.9.1",
+    "eslint": "^9.10.0",
     "eslint-plugin-jest": "^28.8.3",
     "eslint-plugin-react": "^7.35.2",
     "globals": "^15.9.0",
diff --git a/shared/naturalcrit/splitPane/splitPane.jsx b/shared/naturalcrit/splitPane/splitPane.jsx
index 9a7b6fe2b..606b22d40 100644
--- a/shared/naturalcrit/splitPane/splitPane.jsx
+++ b/shared/naturalcrit/splitPane/splitPane.jsx
@@ -126,7 +126,7 @@ const SplitPane = createClass({
 
 	renderDivider : function(){
 		return <>
-			{this.renderMoveArrows()}
+			{this.props.showDividerButtons && this.renderMoveArrows()}
 			<div className='divider' onPointerDown={this.handleDown} >
 				<div className='dots'>
 					<i className='fas fa-circle' />
diff --git a/themes/V3/5ePHB/snippets/tableOfContents.gen.js b/themes/V3/5ePHB/snippets/tableOfContents.gen.js
index dbd0794d5..0fb871ffb 100644
--- a/themes/V3/5ePHB/snippets/tableOfContents.gen.js
+++ b/themes/V3/5ePHB/snippets/tableOfContents.gen.js
@@ -1,57 +1,60 @@
 const _ = require('lodash');
 const dedent = require('dedent-tabs').default;
 
+const mapPages = (iframeDocument, pageMap)=>{
+	let actualPage = 0;
+	let mappedPage = 0;
+	const pages = iframeDocument.querySelectorAll('.page');
+	_.each(pages, (page)=>{
+		actualPage++;
+		const doSkip  = page.querySelector('.skipCounting');
+		const doReset = page.querySelector('.resetCounting');
+
+		if(doReset)
+			mappedPage = 1;
+		if(!doSkip && !doReset)
+			mappedPage++;
+
+		pageMap[actualPage] = {
+			mappedPage : mappedPage,
+			showPage   : !doSkip
+		};
+	});
+};
+
+const recursiveAdd = (title, page, actualPage, targetDepth, child, curDepth=0)=>{
+	const anchor = `p${actualPage}`;
+	if(curDepth > 5) return; // Something went wrong.
+	if(curDepth == targetDepth) {
+		child.push({
+			title    : title,
+			page     : page,
+			anchor   : anchor,
+			children : []
+		});
+	} else {
+		if(child.length == 0) {
+			child.push({
+				title    : null,
+				page     : page,
+				anchor   : anchor,
+				children : []
+			});
+		}
+		recursiveAdd(title, page, anchor, targetDepth, _.last(child).children, curDepth+1,);
+	}
+};
+
 const getTOC = ()=>{
+	const pageMap = [];
+	const entries = [];
 
 	const iframe = document.getElementById('BrewRenderer');
 	const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
 	const headings = iframeDocument.querySelectorAll('h1, h2, h3, h4, h5, h6');
 	const headerDepth = ['H1', 'H2', 'H3', 'H4', 'H5', 'H6'];
 
-	const res = [];
-
-	const pageMap = [];
-
-	const walkPages = ()=>{
-		let current = 0;
-		let skip = 0;
-		let reset = 0;
-		const pages = iframeDocument.querySelectorAll('.page');
-		_.each(pages, (page)=>{
-			current++;
-			if(page.querySelectorAll('.skipCounting').length > 0) {
-				skip += 1;
-			} else if(page.querySelectorAll('.resetCounting').length > 0) {
-				reset = current - 1;
-				skip = 0;
-			}
-			pageMap[current] = current - reset - skip;
-		});
-	};
-
-	const recursiveAdd = (title, page, anchor, targetDepth, child, curDepth=0)=>{
-		if(curDepth > 5) return; // Something went wrong.
-		if(curDepth == targetDepth) {
-			child.push({
-				title    : title,
-				page     : page,
-				anchor   : anchor,
-				children : []
-			});
-		} else {
-			if(child.length == 0) {
-				child.push({
-					title    : null,
-					page     : page,
-					anchor   : anchor,
-					children : []
-				});
-			}
-			recursiveAdd(title, page, anchor, targetDepth, _.last(child).children, curDepth+1,);
-		}
-	};
-
-	walkPages();
+	mapPages(iframeDocument, pageMap);
 
 	_.each(headings, (heading)=>{
 		const pageAnchor = heading.closest('.page').id;
@@ -59,10 +62,10 @@ const getTOC = ()=>{
 		const ToCExclude = getComputedStyle(heading).getPropertyValue('--TOC');
 
 		if(ToCExclude != 'exclude') {
-			recursiveAdd(heading.textContent.trim(), pageMap[onPage], pageAnchor, headerDepth.indexOf(heading.tagName), res);
+			recursiveAdd(heading.textContent.trim(), pageMap[onPage], onPage, headerDepth.indexOf(heading.tagName), entries);
 		}
 	});
-	return res;
+	return entries;
 };
 
 
@@ -70,7 +73,7 @@ const ToCIterate = (entries, curDepth=0)=>{
 	const levelPad = ['- ###', '  - ####', '    - ', '      - ', '        - ', '          - '];
 	const toc = [];
 	if(entries.title !== null){
-		toc.push(`${levelPad[curDepth]} [{{ ${entries.title}}}{{ ${entries.page}}}](#${entries.anchor})`);
+		if(entries.page.showPage) toc.push(`${levelPad[curDepth]} [{{ ${entries.title}}}{{ ${entries.page.mappedPage}}}](#${entries.anchor})`);
 	}
 	if(entries.children.length) {
 		_.each(entries.children, (entry, idx)=>{
@@ -88,7 +91,7 @@ module.exports = function(props){
 	const markdown = _.reduce(TOC, (r, g1, idx1)=>{
 		r.push(ToCIterate(g1).join('\n'));
 		return r;
-	}, []).join('\n');
+	}, []).join('\n').replace('\n\n', '\n');
 
 	return dedent`
 		{{toc,wide