diff --git a/web/src/components/Settings/PrimarySettingsComponent.jsx b/web/src/components/Settings/PrimarySettingsComponent.jsx
index 643e6bf..89a0b63 100644
--- a/web/src/components/Settings/PrimarySettingsComponent.jsx
+++ b/web/src/components/Settings/PrimarySettingsComponent.jsx
@@ -32,10 +32,12 @@ export default function PrimarySettingsComponent({
   settings,
   inputForm,
   cachePercentage,
+  preloadCachePercentage,
   cacheSize,
   isProMode,
   setCacheSize,
   setCachePercentage,
+  setPreloadCachePercentage,
   updateSettings,
 }) {
   const { t } = useTranslation()
@@ -94,10 +96,17 @@ export default function PrimarySettingsComponent({
           inputMax={100}
         />
 
-        <FormControlLabel
-          control={<Switch checked={!!PreloadBuffer} onChange={inputForm} id='PreloadBuffer' color='secondary' />}
-          label={t('SettingsDialog.PreloadBuffer')}
+        <SliderInput
+            isProMode={isProMode}
+            title={t('SettingsDialog.PreloadCache')}
+            value={preloadCachePercentage}
+            setValue={setPreloadCachePercentage}
+            sliderMin={0}
+            sliderMax={100}
+            inputMin={0}
+            inputMax={100}
         />
+
       </div>
 
       {UseDisk ? (
diff --git a/web/src/components/Settings/SettingsDialog.jsx b/web/src/components/Settings/SettingsDialog.jsx
index 5c3368a..b93662a 100644
--- a/web/src/components/Settings/SettingsDialog.jsx
+++ b/web/src/components/Settings/SettingsDialog.jsx
@@ -27,6 +27,7 @@ export default function SettingsDialog({ handleClose }) {
   const [selectedTab, setSelectedTab] = useState(0)
   const [cacheSize, setCacheSize] = useState(32)
   const [cachePercentage, setCachePercentage] = useState(40)
+  const [preloadCachePercentage, setPreloadCachePercentage] = useState(0)
   const [isProMode, setIsProMode] = useState(JSON.parse(localStorage.getItem('isProMode')) || false)
 
   useEffect(() => {
@@ -40,6 +41,7 @@ export default function SettingsDialog({ handleClose }) {
     const sets = JSON.parse(JSON.stringify(settings))
     sets.CacheSize = cacheSize * 1024 * 1024
     sets.ReaderReadAHead = cachePercentage
+    sets.PreloadCache = preloadCachePercentage
     axios.post(settingsHost(), { action: 'set', sets })
   }
 
@@ -65,14 +67,15 @@ export default function SettingsDialog({ handleClose }) {
     setSettings(sets)
   }
 
-  const { CacheSize, ReaderReadAHead } = settings || {}
+  const { CacheSize, ReaderReadAHead, PreloadCache } = settings || {}
 
   useEffect(() => {
-    if (!CacheSize || !ReaderReadAHead) return
+    if (!CacheSize || !ReaderReadAHead || !PreloadCache) return
 
     setCacheSize(CacheSize)
     setCachePercentage(ReaderReadAHead)
-  }, [CacheSize, ReaderReadAHead])
+    setPreloadCachePercentage(PreloadCache)
+  }, [CacheSize, ReaderReadAHead, PreloadCache])
 
   const updateSettings = newProps => setSettings({ ...settings, ...newProps })
   const handleChange = (_, newValue) => setSelectedTab(newValue)
@@ -134,10 +137,12 @@ export default function SettingsDialog({ handleClose }) {
                   settings={settings}
                   inputForm={inputForm}
                   cachePercentage={cachePercentage}
+                  preloadCachePercentage={preloadCachePercentage}
                   cacheSize={cacheSize}
                   isProMode={isProMode}
                   setCacheSize={setCacheSize}
                   setCachePercentage={setCachePercentage}
+                  setPreloadCachePercentage={setPreloadCachePercentage}
                   updateSettings={updateSettings}
                 />
               </TabPanel>
@@ -161,6 +166,7 @@ export default function SettingsDialog({ handleClose }) {
           onClick={() => {
             setCacheSize(defaultSettings.CacheSize)
             setCachePercentage(defaultSettings.ReaderReadAHead)
+            setPreloadCachePercentage(defaultSettings.PreloadCache)
             updateSettings(defaultSettings)
           }}
           color='secondary'