diff --git a/src/common/components/modal-popup/appearance-popup.js b/src/common/components/modal-popup/appearance-popup.js
index 44432a9e..c5cca937 100644
--- a/src/common/components/modal-popup/appearance-popup.js
+++ b/src/common/components/modal-popup/appearance-popup.js
@@ -295,12 +295,14 @@ function AppearancePopup(props) {
 									className={cx({ active: props.viewStats.spreadMode === 0 })}
 									title={intl.formatMessage({ id: 'pdfReader.single' })}
 									onClick={() => props.onChangeSpreadMode(0)}
+									disabled={props.viewStats.flowMode === 'scrolled'}
 								><IconColumnSingle/></button>
 								<button
 									tabIndex={-1}
 									className={cx({ active: props.viewStats.spreadMode === 1 })}
 									title={intl.formatMessage({ id: 'pdfReader.double' })}
 									onClick={() => props.onChangeSpreadMode(1)}
+									disabled={props.viewStats.flowMode === 'scrolled'}
 								><IconColumnDouble/></button>
 							</div>
 						</div>
diff --git a/src/common/stylesheets/components/_modal-popup.scss b/src/common/stylesheets/components/_modal-popup.scss
index a098d870..bf35707b 100644
--- a/src/common/stylesheets/components/_modal-popup.scss
+++ b/src/common/stylesheets/components/_modal-popup.scss
@@ -252,7 +252,7 @@
 			box-shadow: none;
 			position: relative;
 
-			&.active, &:active, &.active-pseudo-class-fix {
+			&.active, &:active:not(:disabled), &.active-pseudo-class-fix:not(:disabled) {
 				background: var(--material-button, #FFFFFF);
 				border: 0.5px solid var(--fill-senary, #00000005);
 				box-shadow: 0px 0px 0px 0.5px rgba(0, 0, 0, 0.05), 0px 0.5px 2.5px 0px rgba(0, 0, 0, 0.30);
@@ -266,7 +266,7 @@
 				}
 			}
 
-			&:active:not(.active), &.active-pseudo-class-fix:not(.active) {
+			&:active:not(.active):not(:disabled), &.active-pseudo-class-fix:not(.active):not(:disabled) {
 				background-color: var(--color-button50);
 				z-index: 1;
 			}