diff --git a/src/apps/experimental/routes/user/display/DisplayPreferences.tsx b/src/apps/experimental/routes/user/display/DisplayPreferences.tsx
index a862727cf1..0645edbd4f 100644
--- a/src/apps/experimental/routes/user/display/DisplayPreferences.tsx
+++ b/src/apps/experimental/routes/user/display/DisplayPreferences.tsx
@@ -2,13 +2,16 @@ import Checkbox from '@mui/material/Checkbox';
 import FormControl from '@mui/material/FormControl';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import FormHelperText from '@mui/material/FormHelperText';
+import InputLabel from '@mui/material/InputLabel';
 import MenuItem from '@mui/material/MenuItem';
 import Select, { SelectChangeEvent } from '@mui/material/Select';
 import Stack from '@mui/material/Stack';
 import TextField from '@mui/material/TextField';
 import Typography from '@mui/material/Typography';
-import React from 'react';
+import React, { Fragment } from 'react';
 
+import { appHost } from 'components/apphost';
+import { useApi } from 'hooks/useApi';
 import globalize from 'scripts/globalize';
 import { DisplaySettingsValues } from './types';
 import { useScreensavers } from './hooks/useScreensavers';
@@ -20,49 +23,56 @@ interface DisplayPreferencesProps {
 }
 
 export function DisplayPreferences({ onChange, values }: Readonly<DisplayPreferencesProps>) {
+    const { user } = useApi();
     const { screensavers } = useScreensavers();
     const { themes } = useServerThemes();
 
     return (
-        <Stack spacing={2}>
+        <Stack spacing={3}>
             <Typography variant='h2'>{globalize.translate('Display')}</Typography>
 
-            <FormControl fullWidth>
-                <Select
-                    aria-describedby='display-settings-layout-description'
-                    inputProps={{
-                        name: 'layout'
-                    }}
-                    label={globalize.translate('LabelDisplayMode')}
-                    onChange={onChange}
-                    value={values.layout}
-                >
-                    <MenuItem value='auto'>{globalize.translate('Auto')}</MenuItem>
-                    <MenuItem value='desktop'>{globalize.translate('Desktop')}</MenuItem>
-                    <MenuItem value='mobile'>{globalize.translate('Mobile')}</MenuItem>
-                    <MenuItem value='tv'>{globalize.translate('TV')}</MenuItem>
-                    <MenuItem value='experimental'>{globalize.translate('Experimental')}</MenuItem>
-                </Select>
-                <FormHelperText component={Stack} id='display-settings-layout-description'>
-                    <span>{globalize.translate('DisplayModeHelp')}</span>
-                    <span>{globalize.translate('LabelPleaseRestart')}</span>
-                </FormHelperText>
-            </FormControl>
+            { appHost.supports('displaymode') && (
+                <FormControl fullWidth>
+                    <InputLabel id='display-settings-layout-label'>{globalize.translate('LabelDisplayMode')}</InputLabel>
+                    <Select
+                        aria-describedby='display-settings-layout-description'
+                        inputProps={{
+                            name: 'layout'
+                        }}
+                        labelId='display-settings-layout-label'
+                        onChange={onChange}
+                        value={values.layout}
+                    >
+                        <MenuItem value='auto'>{globalize.translate('Auto')}</MenuItem>
+                        <MenuItem value='desktop'>{globalize.translate('Desktop')}</MenuItem>
+                        <MenuItem value='mobile'>{globalize.translate('Mobile')}</MenuItem>
+                        <MenuItem value='tv'>{globalize.translate('TV')}</MenuItem>
+                        <MenuItem value='experimental'>{globalize.translate('Experimental')}</MenuItem>
+                    </Select>
+                    <FormHelperText component={Stack} id='display-settings-layout-description'>
+                        <span>{globalize.translate('DisplayModeHelp')}</span>
+                        <span>{globalize.translate('LabelPleaseRestart')}</span>
+                    </FormHelperText>
+                </FormControl>
+            ) }
 
-            <FormControl fullWidth>
-                <Select
-                    inputProps={{
-                        name: 'theme'
-                    }}
-                    label={globalize.translate('LabelTheme')}
-                    onChange={onChange}
-                    value={values.theme}
-                >
-                    { ...themes.map(({ id, name }) => (
-                        <MenuItem key={id} value={id}>{name}</MenuItem>
-                    ))}
-                </Select>
-            </FormControl>
+            { themes.length > 0 && (
+                <FormControl fullWidth>
+                    <InputLabel id='display-settings-theme-label'>{globalize.translate('LabelTheme')}</InputLabel>
+                    <Select
+                        inputProps={{
+                            name: 'theme'
+                        }}
+                        labelId='display-settings-theme-label'
+                        onChange={onChange}
+                        value={values.theme}
+                    >
+                        { ...themes.map(({ id, name }) => (
+                            <MenuItem key={id} value={id}>{name}</MenuItem>
+                        ))}
+                    </Select>
+                </FormControl>
+            ) }
 
             <FormControl fullWidth>
                 <FormControlLabel
@@ -84,7 +94,7 @@ export function DisplayPreferences({ onChange, values }: Readonly<DisplayPrefere
             <FormControl fullWidth>
                 <TextField
                     aria-describedby='display-settings-custom-css-description'
-                    defaultValue={values.customCss}
+                    value={values.customCss}
                     label={globalize.translate('LabelCustomCss')}
                     multiline
                     name='customCss'
@@ -95,25 +105,65 @@ export function DisplayPreferences({ onChange, values }: Readonly<DisplayPrefere
                 </FormHelperText>
             </FormControl>
 
-            {/* TODO: There are some admin-only options here */}
-            {/* Server Dashboard Theme */}
+            { themes.length > 0 && user?.Policy?.IsAdministrator && (
+                <FormControl fullWidth>
+                    <InputLabel id='display-settings-dashboard-theme-label'>{globalize.translate('LabelDashboardTheme')}</InputLabel>
+                    <Select
+                        inputProps={{
+                            name: 'dashboardTheme'
+                        }}
+                        labelId='display-settings-dashboard-theme-label'
+                        onChange={ onChange }
+                        value={ values.dashboardTheme }
+                    >
+                        { ...themes.map(({ id, name }) => (
+                            <MenuItem key={ id } value={ id }>{ name }</MenuItem>
+                        )) }
+                    </Select>
+                </FormControl>
+            ) }
 
-            <FormControl fullWidth>
-                <Select
-                    inputProps={{
-                        name: 'screensaver'
-                    }}
-                    label={globalize.translate('LabelScreensaver')}
-                    onChange={onChange}
-                    value={values.screensaver}
-                >
-                    { ...screensavers.map(({ id, name }) => (
-                        <MenuItem key={id} value={id}>{name}</MenuItem>
-                    ))}
-                </Select>
-            </FormControl>
+            { screensavers.length > 0 && appHost.supports('screensaver') && (
+                <Fragment>
+                    <FormControl fullWidth>
+                        <InputLabel id='display-settings-screensaver-label'>{globalize.translate('LabelScreensaver')}</InputLabel>
+                        <Select
+                            inputProps={{
+                                name: 'screensaver'
+                            }}
+                            labelId='display-settings-screensaver-label'
+                            onChange={onChange}
+                            value={values.screensaver}
+                        >
+                            { ...screensavers.map(({ id, name }) => (
+                                <MenuItem key={id} value={id}>{name}</MenuItem>
+                            ))}
+                        </Select>
+                    </FormControl>
 
-            {/* TODO: There are some extra options here related to screensavers */}
+                    <FormControl fullWidth>
+                        <TextField
+                            aria-describedby='display-settings-screensaver-interval-description'
+                            value={values.screensaverInterval}
+                            inputProps={{
+                                inputMode: 'numeric',
+                                max: '3600',
+                                min: '1',
+                                pattern: '[0-9]',
+                                required: true,
+                                step: '1',
+                                type: 'number'
+                            }}
+                            label={globalize.translate('LabelBackdropScreensaverInterval')}
+                            name='screensaverInterval'
+                            onChange={onChange}
+                        />
+                        <FormHelperText id='display-settings-screensaver-interval-description'>
+                            {globalize.translate('LabelBackdropScreensaverIntervalHelp')}
+                        </FormHelperText>
+                    </FormControl>
+                </Fragment>
+            ) }
 
             <FormControl fullWidth>
                 <FormControlLabel
diff --git a/src/apps/experimental/routes/user/display/LibraryPreferences.tsx b/src/apps/experimental/routes/user/display/LibraryPreferences.tsx
index 04ae913999..a73fa7138c 100644
--- a/src/apps/experimental/routes/user/display/LibraryPreferences.tsx
+++ b/src/apps/experimental/routes/user/display/LibraryPreferences.tsx
@@ -17,7 +17,7 @@ interface LibraryPreferencesProps {
 
 export function LibraryPreferences({ onChange, values }: Readonly<LibraryPreferencesProps>) {
     return (
-        <Stack spacing={2}>
+        <Stack spacing={3}>
             <Typography variant='h2'>{globalize.translate('HeaderLibraries')}</Typography>
 
             <FormControl fullWidth>
@@ -32,7 +32,7 @@ export function LibraryPreferences({ onChange, values }: Readonly<LibraryPrefere
                         required: true,
                         step: '1'
                     }}
-                    defaultValue={values.libraryPageSize}
+                    value={values.libraryPageSize}
                     label={globalize.translate('LabelLibraryPageSize')}
                     name='libraryPageSize'
                     onChange={onChange}
diff --git a/src/apps/experimental/routes/user/display/LocalizationPreferences.tsx b/src/apps/experimental/routes/user/display/LocalizationPreferences.tsx
index d0e625174e..e406d0e38e 100644
--- a/src/apps/experimental/routes/user/display/LocalizationPreferences.tsx
+++ b/src/apps/experimental/routes/user/display/LocalizationPreferences.tsx
@@ -1,5 +1,6 @@
 import FormControl from '@mui/material/FormControl';
 import FormHelperText from '@mui/material/FormHelperText';
+import InputLabel from '@mui/material/InputLabel';
 import Link from '@mui/material/Link';
 import MenuItem from '@mui/material/MenuItem';
 import Select, { SelectChangeEvent } from '@mui/material/Select';
@@ -7,6 +8,8 @@ import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 import React from 'react';
 
+import { appHost } from 'components/apphost';
+import datetime from 'scripts/datetime';
 import globalize from 'scripts/globalize';
 import { DATE_LOCALE_OPTIONS, LANGUAGE_OPTIONS } from './constants';
 import { DisplaySettingsValues } from './types';
@@ -17,50 +20,61 @@ interface LocalizationPreferencesProps {
 }
 
 export function LocalizationPreferences({ onChange, values }: Readonly<LocalizationPreferencesProps>) {
+    if (!appHost.supports('displaylanguage') && !datetime.supportsLocalization()) {
+        return null;
+    }
     return (
-        <Stack spacing={2}>
+        <Stack spacing={3}>
             <Typography variant='h2'>{globalize.translate('Localization')}</Typography>
 
-            <FormControl fullWidth>
-                <Select
-                    aria-describedby='display-settings-language-description'
-                    inputProps={{
-                        name: 'language'
-                    }}
-                    label={globalize.translate('LabelDisplayLanguage')}
-                    onChange={onChange}
-                    value={values.language}
-                >
-                    { ...LANGUAGE_OPTIONS.map(({ value, label }) => (
-                        <MenuItem key={value } value={value}>{ label }</MenuItem>
-                    ))}
-                </Select>
-                <FormHelperText component={Stack} id='display-settings-language-description'>
-                    <span>{globalize.translate('LabelDisplayLanguageHelp')}</span>
-                    <Link
-                        href='https://github.com/jellyfin/jellyfin'
-                        rel='noopener noreferrer'
-                        target='_blank'
+            { appHost.supports('displaylanguage') && (
+                <FormControl fullWidth>
+                    <InputLabel id='display-settings-language-label'>{globalize.translate('LabelDisplayLanguage')}</InputLabel>
+                    <Select
+                        aria-describedby='display-settings-language-description'
+                        inputProps={{
+                            name: 'language'
+                        }}
+                        labelId='display-settings-language-label'
+                        onChange={onChange}
+                        value={values.language}
                     >
-                        {globalize.translate('LearnHowYouCanContribute')}
-                    </Link>
-                </FormHelperText>
-            </FormControl>
+                        { ...LANGUAGE_OPTIONS.map(({ value, label }) => (
+                            <MenuItem key={value } value={value}>{ label }</MenuItem>
+                        ))}
+                    </Select>
+                    <FormHelperText component={Stack} id='display-settings-language-description'>
+                        <span>{globalize.translate('LabelDisplayLanguageHelp')}</span>
+                        { appHost.supports('externallinks') && (
+                            <Link
+                                href='https://github.com/jellyfin/jellyfin'
+                                rel='noopener noreferrer'
+                                target='_blank'
+                            >
+                                {globalize.translate('LearnHowYouCanContribute')}
+                            </Link>
+                        ) }
+                    </FormHelperText>
+                </FormControl>
+            ) }
 
-            <FormControl fullWidth>
-                <Select
-                    inputProps={{
-                        name: 'dateTimeLocale'
-                    }}
-                    label={globalize.translate('LabelDateTimeLocale')}
-                    onChange={onChange}
-                    value={values.dateTimeLocale}
-                >
-                    {...DATE_LOCALE_OPTIONS.map(({ value, label }) => (
-                        <MenuItem key={value} value={value}>{label}</MenuItem>
-                    ))}
-                </Select>
-            </FormControl>
+            { datetime.supportsLocalization() && (
+                <FormControl fullWidth>
+                    <InputLabel id='display-settings-locale-label'>{globalize.translate('LabelDateTimeLocale')}</InputLabel>
+                    <Select
+                        inputProps={{
+                            name: 'dateTimeLocale'
+                        }}
+                        labelId='display-settings-locale-label'
+                        onChange={onChange}
+                        value={values.dateTimeLocale}
+                    >
+                        {...DATE_LOCALE_OPTIONS.map(({ value, label }) => (
+                            <MenuItem key={value} value={value}>{label}</MenuItem>
+                        ))}
+                    </Select>
+                </FormControl>
+            ) }
         </Stack>
     );
 }
diff --git a/src/apps/experimental/routes/user/display/NextUpPreferences.tsx b/src/apps/experimental/routes/user/display/NextUpPreferences.tsx
index fba6b406ef..1c21012a1f 100644
--- a/src/apps/experimental/routes/user/display/NextUpPreferences.tsx
+++ b/src/apps/experimental/routes/user/display/NextUpPreferences.tsx
@@ -17,13 +17,13 @@ interface NextUpPreferencesProps {
 
 export function NextUpPreferences({ onChange, values }: Readonly<NextUpPreferencesProps>) {
     return (
-        <Stack spacing={2}>
+        <Stack spacing={3}>
             <Typography variant='h2'>{globalize.translate('NextUp')}</Typography>
 
             <FormControl fullWidth>
                 <TextField
                     aria-describedby='display-settings-max-days-next-up-description'
-                    defaultValue={values.maxDaysForNextUp}
+                    value={values.maxDaysForNextUp}
                     inputProps={{
                         type: 'number',
                         inputMode: 'numeric',
diff --git a/src/apps/experimental/routes/user/display/index.tsx b/src/apps/experimental/routes/user/display/index.tsx
index c17e39a786..f30b48f5bc 100644
--- a/src/apps/experimental/routes/user/display/index.tsx
+++ b/src/apps/experimental/routes/user/display/index.tsx
@@ -31,7 +31,7 @@ export default function UserDisplayPreferences() {
     const handleFieldChange = useCallback((e: SelectChangeEvent | React.SyntheticEvent) => {
         const target = e.target as HTMLInputElement;
         const fieldName = target.name as keyof DisplaySettingsValues;
-        const fieldValue = target.checked ?? target.value;
+        const fieldValue = target.type === 'checkbox' ? target.checked : target.value;
 
         if (values?.[fieldName] !== fieldValue) {
             updateField({