diff --git a/res/icons/20/skip-ahead-granular.svg b/res/icons/20/skip-ahead-granular.svg
new file mode 100644
index 000000000..b6c6939ae
--- /dev/null
+++ b/res/icons/20/skip-ahead-granular.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.8838 10L4.88379 16L4 15.1162L9.11621 10L4 4.88379L4.88379 4L10.8838 10Z" fill="currentColor"/>
+</svg>
diff --git a/res/icons/20/skip-back-granular.svg b/res/icons/20/skip-back-granular.svg
new file mode 100644
index 000000000..c71549dd3
--- /dev/null
+++ b/res/icons/20/skip-back-granular.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16 4.88379L10.8838 10L16 15.1162L15.1162 16L9.11621 10L15.1162 4L16 4.88379Z" fill="currentColor"/>
+</svg>
diff --git a/src/common/components/utility-popup/read-aloud-popup.js b/src/common/components/utility-popup/read-aloud-popup.js
index bb7738830..7b40276fd 100644
--- a/src/common/components/utility-popup/read-aloud-popup.js
+++ b/src/common/components/utility-popup/read-aloud-popup.js
@@ -7,6 +7,8 @@ import IconSkipBack from '../../../../res/icons/20/skip-back.svg';
 import IconPlay from '../../../../res/icons/20/play.svg';
 import IconPause from '../../../../res/icons/20/pause.svg';
 import IconSkipAhead from '../../../../res/icons/20/skip-ahead.svg';
+import IconSkipBackGranular from '../../../../res/icons/20/skip-back-granular.svg';
+import IconSkipAheadGranular from '../../../../res/icons/20/skip-ahead-granular.svg';
 import IconAnnotate from '../../../../res/icons/20/read-aloud-annotate.svg';
 import IconLoading from '../../../../res/icons/16/loading.svg';
 import IconClock from '../../../../res/icons/12/clock.svg';
@@ -461,6 +463,19 @@ function PlaybackControls(props) {
 	const { l10n } = useLocalization();
 
 	let { showOptions, onToggleOptions, showSpinner, paused, onPlayPause, controller, onAddAnnotation, onLockPosition } = props;
+	let [altDown, setAltDown] = useState(false);
+
+	useEffect(() => {
+		let handleKey = (event) => {
+			setAltDown(event.altKey);
+		};
+		window.addEventListener('keydown', handleKey);
+		window.addEventListener('keyup', handleKey);
+		return () => {
+			window.removeEventListener('keydown', handleKey);
+			window.removeEventListener('keyup', handleKey);
+		};
+	}, []);
 
 	function handleAddAnnotation() {
 		let segment = controller?.getSegmentToAnnotate();
@@ -470,7 +485,11 @@ function PlaybackControls(props) {
 	}
 
 	return (
-		<div className="row buttons" data-tabstop={1}>
+		<div
+			className="row buttons"
+			data-tabstop={1}
+			onMouseMove={event => setAltDown(event.altKey)}
+		>
 			<div className="group">
 				<button
 					className={cx('toolbar-button', { active: showOptions })}
@@ -482,13 +501,13 @@ function PlaybackControls(props) {
 			<div className="group">
 				<button
 					className="toolbar-button"
-					title={l10n.getString('reader-read-aloud-skip-back')}
+					title={l10n.getString(altDown ? 'reader-read-aloud-skip-back-sentence' : 'reader-read-aloud-skip-back')}
 					tabIndex="-1"
 					onClick={(event) => {
 						controller?.skipBack(event.altKey ? 'sentence' : 'paragraph', event.shiftKey);
 						onLockPosition();
 					}}
-				><IconSkipBack/></button>
+				>{altDown ? <IconSkipBackGranular/> : <IconSkipBack/>}</button>
 				{showSpinner
 					? <IconLoading
 						className="loading-spinner"
@@ -508,13 +527,13 @@ function PlaybackControls(props) {
 				}
 				<button
 					className="toolbar-button"
-					title={l10n.getString('reader-read-aloud-skip-ahead')}
+					title={l10n.getString(altDown ? 'reader-read-aloud-skip-ahead-sentence' : 'reader-read-aloud-skip-ahead')}
 					tabIndex="-1"
 					onClick={(event) => {
 						controller?.skipAhead(event.altKey ? 'sentence' : 'paragraph', event.shiftKey);
 						onLockPosition();
 					}}
-				><IconSkipAhead/></button>
+				>{altDown ? <IconSkipAheadGranular/> : <IconSkipAhead/>}</button>
 			</div>
 			<div className="group">
 				<button