diff --git a/shared/naturalcrit/splitPane/splitPane.jsx b/shared/naturalcrit/splitPane/splitPane.jsx
index 60fc5c997..70dd98e43 100644
--- a/shared/naturalcrit/splitPane/splitPane.jsx
+++ b/shared/naturalcrit/splitPane/splitPane.jsx
@@ -3,112 +3,90 @@ const React = require('react');
 const { useState, useEffect, useRef } = React;
 const cx = require('classnames');
 
-const SplitPane = (props) => {
-	props = {
-		storageKey         : 'naturalcrit-pane-split',
-		onDragFinish       : function(){}, //fires when dragging
-		showDividerButtons : true,
-		...props
-	};
-	const pane1 = useRef(null);
-	const pane2 = useRef(null);
-	const [currentDividerPos, setCurrentDividerPos] = useState(null);
-	const [userSetDividerPos, setUserSetDividerPos] = useState(null);
-	const [windowWidth, setWindowWidth] = useState(null);
+const SplitPane = (props)=>{
+	const {
+		storageKey = 'naturalcrit-pane-split',
+		onDragFinish = ()=>{},
+		showDividerButtons = true
+	} = props;
+
 	const [isDragging, setIsDragging] = useState(false);
+	const [dividerPos, setDividerPos] = useState(null); // Initial divider position is set to `null`
 	const [moveSource, setMoveSource] = useState(false);
 	const [moveBrew, setMoveBrew] = useState(false);
 	const [showMoveArrows, setShowMoveArrows] = useState(true);
 	const [liveScroll, setLiveScroll] = useState(false);
 
-	const storageKey = props.storageKey || 'naturalcrit-pane-split';
-	const onDragFinish = props.onDragFinish || (() => {});
+	const dividerRef = useRef(null);
 
-	// Fetch saved divider position and scroll state on mount
-	useEffect(() => {
-		setWindowWidth(window.innerWidth);
-		const dividerPos = window.localStorage.getItem(storageKey);
-		const liveScrollSetting = window.localStorage.getItem('liveScroll') === 'true';
-		setLiveScroll(liveScrollSetting);
+	// Set initial divider position and liveScroll only after mounting
+	useEffect(()=>{
+		const savedPos = window.localStorage.getItem(storageKey);
+		setDividerPos(savedPos ? parseInt(savedPos, 10) : window.innerWidth / 2);
+		setLiveScroll(window.localStorage.getItem('liveScroll') === 'true');
 
-		if (dividerPos) {
-			const limitedPos = limitPosition(dividerPos, 0.1 * (window.innerWidth - 13), 0.9 * (window.innerWidth - 13));
-			setCurrentDividerPos(limitedPos);
-			setUserSetDividerPos(dividerPos);
-		} else {
-			setCurrentDividerPos(window.innerWidth / 2);
-			setUserSetDividerPos(window.innerWidth / 2);
-		}
-
-		const handleResize = () => {
-			const newPos = limitPosition(userSetDividerPos, 0.1 * (window.innerWidth - 13), 0.9 * (window.innerWidth - 13));
-			setCurrentDividerPos(newPos);
-			setWindowWidth(window.innerWidth);
+		const handleResize = ()=>{
+			setDividerPos((pos)=>limitPosition(pos,0.1 * (window.innerWidth - 13), 0.9 * (window.innerWidth - 13))
+			);
 		};
 		window.addEventListener('resize', handleResize);
+		return ()=>window.removeEventListener('resize', handleResize);
+	}, [storageKey]);
 
-		return () => {
-			window.removeEventListener('resize', handleResize);
-		};
-	}, []);
-
-	const limitPosition = (x, min = 1, max = window.innerWidth - 13) => {
+	const limitPosition = (x, min = 1, max = window.innerWidth - 13)=>{
 		return Math.round(Math.min(max, Math.max(min, x)));
 	};
 
-	const handleUp = (e) => {
+	const handleUp =(e)=>{
 		e.preventDefault();
-		if (isDragging) {
-			onDragFinish(currentDividerPos);
-			window.localStorage.setItem(storageKey, currentDividerPos);
+		if(isDragging) {
+			onDragFinish(dividerPos);
+			window.localStorage.setItem(storageKey, dividerPos);
 		}
 		setIsDragging(false);
 	};
 
-	const handleDown = (e) => {
+	const handleDown = (e)=>{
 		e.preventDefault();
 		setIsDragging(true);
 	};
 
-	const handleMove = (e) => {
-		if (!isDragging) return;
+	const handleMove = (e)=>{
+		if(!isDragging) return;
 		e.preventDefault();
 		const newSize = limitPosition(e.pageX);
-		setCurrentDividerPos(newSize);
-		setUserSetDividerPos(newSize);
+		setDividerPos(newSize);
 	};
 
-	const liveScrollToggle = () => {
-		const newScrollState = !liveScroll;
-		window.localStorage.setItem('liveScroll', String(newScrollState));
-		setLiveScroll(newScrollState);
+	const liveScrollToggle = ()=>{
+		window.localStorage.setItem('liveScroll', String(!liveScroll));
+		setLiveScroll(!liveScroll);
 	};
 
-	const renderMoveArrows = () => {
-		console.log('showMoveArrows: ', showMoveArrows);
-		if (showMoveArrows) {
-			return (
-				<>
-					<div className='arrow left' onClick={() => setMoveSource(!moveSource)}>
-						<i className='fas fa-arrow-left' />
-					</div>
-					<div className='arrow right' onClick={() => setMoveBrew(!moveBrew)}>
-						<i className='fas fa-arrow-right' />
-					</div>
-					<div
-						id='scrollToggleDiv'
-						className={liveScroll ? 'arrow lock' : 'arrow unlock'}
-						onClick={liveScrollToggle}>
-						<i id='scrollToggle' className={liveScroll ? 'fas fa-lock' : 'fas fa-unlock'} />
-					</div>
-				</>
-			);
-		}
-	};
+	const moveArrows = showMoveArrows && (
+		<>
+			{['left', 'right'].map((direction, index) => (
+				<div
+					key={direction}
+					className={`arrow ${direction}`}
+					onClick={index === 0 ? () => setMoveSource(!moveSource) : () => setMoveBrew(!moveBrew)}
+				>
+					<i className={`fas fa-arrow-${direction}`} />
+				</div>
+			))}
+			<div
+				id='scrollToggleDiv'
+				className={`arrow ${liveScroll ? 'lock' : 'unlock'}`}
+				onClick={liveScrollToggle}
+			>
+				<i id='scrollToggle' className={`fas fa-${liveScroll ? 'lock' : 'unlock'}`} />
+			</div>
+		</>
+	);
 
-	const renderDivider = () => (
-		<div className='divider' onPointerDown={handleDown}>
-			{props.showDividerButtons && renderMoveArrows()}
+	const renderDivider = ()=>(
+		<div className='divider' onPointerDown={handleDown} ref={dividerRef}>
+			{showDividerButtons && moveArrows}
 			<div className='dots'>
 				<i className='fas fa-circle' />
 				<i className='fas fa-circle' />
@@ -119,28 +97,25 @@ const SplitPane = (props) => {
 
 	return (
 		<div className='splitPane' onPointerMove={handleMove} onPointerUp={handleUp}>
-			<Pane ref={pane1} width={currentDividerPos}>
-				{React.cloneElement(props.children[0], {
-					...(props.showDividerButtons && {
-						moveBrew,
-						moveSource,
-						liveScroll,
-						setMoveArrows: setShowMoveArrows,
-					}),
-				})}
+			<Pane width={dividerPos} moveBrew={moveBrew} moveSource={moveSource} liveScroll={liveScroll} setMoveArrows={setShowMoveArrows}>
+				{props.children[0]}
 			</Pane>
 			{renderDivider()}
-			<Pane ref={pane2} isDragging={isDragging}>{props.children[1]}</Pane>
+			<Pane isDragging={isDragging}>{props.children[1]}</Pane>
 		</div>
 	);
 };
 
-const Pane = ({ width, children, isDragging, className }) => {
+const Pane = ({ width, children, isDragging, className, moveBrew, moveSource, liveScroll, setMoveArrows })=>{
 	const styles = width
 		? { flex: 'none', width: `${width}px` }
 		: { pointerEvents: isDragging ? 'none' : 'auto' };
 
-	return <div className={cx('pane', className)} style={styles}>{children}</div>;
+	return (
+		<div className={cx('pane', className)} style={styles}>
+			{React.cloneElement(children, { moveBrew, moveSource, liveScroll, setMoveArrows })}
+		</div>
+	);
 };
 
 module.exports = SplitPane;
diff --git a/shared/naturalcrit/splitPane/splitPane.less b/shared/naturalcrit/splitPane/splitPane.less
index ba85dc3a7..66e47ef23 100644
--- a/shared/naturalcrit/splitPane/splitPane.less
+++ b/shared/naturalcrit/splitPane/splitPane.less
@@ -1,72 +1,68 @@
 
-.splitPane{
+.splitPane {
 	position       : relative;
 	display        : flex;
+	flex-direction : row;
 	height         : 100%;
 	outline        : none;
-	flex-direction : row;
-	.pane{
+	.pane {
+		flex       : 1;
 		overflow-x : hidden;
 		overflow-y : hidden;
-		flex       : 1;
 	}
-	.divider{
-		position:relative;
-		touch-action     : none;
+	.divider {
+		position         : relative;
 		display          : table;
-		height           : 100%;
 		width            : 15px;
-		cursor           : ew-resize;
-		background-color : #bbb;
+		height           : 100%;
 		text-align       : center;
-		.dots{
+		touch-action     : none;
+		cursor           : ew-resize;
+		background-color : #BBBBBB;
+		.dots {
 			display        : table-cell;
-			vertical-align : middle;
 			text-align     : center;
-			i{
+			vertical-align : middle;
+			i {
 				display   : block !important;
 				margin    : 10px 0px;
 				font-size : 6px;
-				color     : #666;
+				color     : #666666;
 			}
 		}
-		&:hover{
-			background-color: #999;
-		}
+		&:hover { background-color : #999999; }
 	}
-	.arrow{
+	.arrow {
 		position         : absolute;
-		left:50%;
-		translate:-50%;
+		left             : 50%;
+		z-index          : 999;
 		width            : 25px;
 		height           : 25px;
-		border           : 2px solid #bbb;
-		border-radius    : 15px;
-		text-align       : center;
 		font-size        : 1.2em;
+		text-align       : center;
 		cursor           : pointer;
-		background-color : #ddd;
-		z-index          : 999;
-		box-shadow      : 0 4px 5px #0000007f;
-		&.left{
+		background-color : #DDDDDD;
+		border           : 2px solid #BBBBBB;
+		border-radius    : 15px;
+		box-shadow       : 0 4px 5px #0000007F;
+		translate        : -50%;
+		&.left {
 			.tooltipLeft('Jump to location in Editor');
 			top : 30px;
 		}
-		&.right{
+		&.right {
 			.tooltipRight('Jump to location in Preview');
 			top : 60px;
 		}
-		&.lock{
+		&.lock {
 			.tooltipRight('De-sync Editor and Preview locations.');
-			top : 90px;
-			background: #666;
+			top        : 90px;
+			background : #666666;
 		}
-		&.unlock{
+		&.unlock {
 			.tooltipRight('Sync Editor and Preview locations');
 			top : 90px;
 		}
-		&:hover{
-			background-color: #666;
-		}
+		&:hover { background-color : #666666; }
 	}
 }