diff --git a/src/controllers/dashboard/encodingsettings.html b/src/controllers/dashboard/encodingsettings.html
index a94cd4129f..e9f2a03aa9 100644
--- a/src/controllers/dashboard/encodingsettings.html
+++ b/src/controllers/dashboard/encodingsettings.html
@@ -182,7 +182,7 @@
                 </div>
 
                 <div class="tonemappingOptions hide">
-                    <div class="checkboxListContainer checkboxContainer-withDescription">
+                    <div class="checkboxListContainer checkboxContainer-withDescription fldTonemapCheckbox hide">
                         <label>
                             <input type="checkbox" is="emby-checkbox" id="chkTonemapping" />
                             <span>${EnableTonemapping}</span>
diff --git a/src/controllers/dashboard/encodingsettings.js b/src/controllers/dashboard/encodingsettings.js
index 0459830676..964529507b 100644
--- a/src/controllers/dashboard/encodingsettings.js
+++ b/src/controllers/dashboard/encodingsettings.js
@@ -207,10 +207,15 @@ $(document).on('pageinit', '#encodingSettingsPage', function () {
         }
 
         const isHwaSelected = [ 'amf', 'nvenc', 'qsv', 'vaapi', 'rkmpp', 'videotoolbox' ].includes(this.value);
-        if (this.value === 'none' || isHwaSelected) {
+        if (this.value === 'none') {
             page.querySelector('.tonemappingOptions').classList.remove('hide');
+            page.querySelector('.fldTonemapCheckbox').classList.add('hide');
+        } else if (isHwaSelected) {
+            page.querySelector('.tonemappingOptions').classList.remove('hide');
+            page.querySelector('.fldTonemapCheckbox').classList.remove('hide');
         } else {
             page.querySelector('.tonemappingOptions').classList.add('hide');
+            page.querySelector('.fldTonemapCheckbox').classList.add('hide');
         }
 
         page.querySelector('.tonemappingModeOptions').classList.toggle('hide', !isHwaSelected);