diff --git a/src/apps/experimental/routes/user/display/DisplayPreferences.tsx b/src/apps/experimental/features/preferences/components/DisplayPreferences.tsx
similarity index 98%
rename from src/apps/experimental/routes/user/display/DisplayPreferences.tsx
rename to src/apps/experimental/features/preferences/components/DisplayPreferences.tsx
index 4592fc537cd..e384f34ee6c 100644
--- a/src/apps/experimental/routes/user/display/DisplayPreferences.tsx
+++ b/src/apps/experimental/features/preferences/components/DisplayPreferences.tsx
@@ -15,8 +15,8 @@ import { useApi } from 'hooks/useApi';
 import { useThemes } from 'hooks/useThemes';
 import globalize from 'lib/globalize';
 
-import { DisplaySettingsValues } from './types';
-import { useScreensavers } from './hooks/useScreensavers';
+import { useScreensavers } from '../hooks/useScreensavers';
+import type { DisplaySettingsValues } from '../types/displaySettingsValues';
 
 interface DisplayPreferencesProps {
     onChange: (event: SelectChangeEvent | React.SyntheticEvent) => void;
diff --git a/src/apps/experimental/routes/user/display/ItemDetailPreferences.tsx b/src/apps/experimental/features/preferences/components/ItemDetailPreferences.tsx
similarity index 95%
rename from src/apps/experimental/routes/user/display/ItemDetailPreferences.tsx
rename to src/apps/experimental/features/preferences/components/ItemDetailPreferences.tsx
index fcb256d3237..64c0491b124 100644
--- a/src/apps/experimental/routes/user/display/ItemDetailPreferences.tsx
+++ b/src/apps/experimental/features/preferences/components/ItemDetailPreferences.tsx
@@ -7,7 +7,8 @@ import Typography from '@mui/material/Typography';
 import React from 'react';
 
 import globalize from 'lib/globalize';
-import { DisplaySettingsValues } from './types';
+
+import type { DisplaySettingsValues } from '../types/displaySettingsValues';
 
 interface ItemDetailPreferencesProps {
     onChange: (event: React.SyntheticEvent) => void;
diff --git a/src/apps/experimental/routes/user/display/LibraryPreferences.tsx b/src/apps/experimental/features/preferences/components/LibraryPreferences.tsx
similarity index 98%
rename from src/apps/experimental/routes/user/display/LibraryPreferences.tsx
rename to src/apps/experimental/features/preferences/components/LibraryPreferences.tsx
index 573bd008483..4b65960070e 100644
--- a/src/apps/experimental/routes/user/display/LibraryPreferences.tsx
+++ b/src/apps/experimental/features/preferences/components/LibraryPreferences.tsx
@@ -8,7 +8,8 @@ import Typography from '@mui/material/Typography';
 import React from 'react';
 
 import globalize from 'lib/globalize';
-import { DisplaySettingsValues } from './types';
+
+import type { DisplaySettingsValues } from '../types/displaySettingsValues';
 
 interface LibraryPreferencesProps {
     onChange: (event: React.SyntheticEvent) => void;
diff --git a/src/apps/experimental/routes/user/display/LocalizationPreferences.tsx b/src/apps/experimental/features/preferences/components/LocalizationPreferences.tsx
similarity index 94%
rename from src/apps/experimental/routes/user/display/LocalizationPreferences.tsx
rename to src/apps/experimental/features/preferences/components/LocalizationPreferences.tsx
index 003fc0cae50..4e36a08033a 100644
--- a/src/apps/experimental/routes/user/display/LocalizationPreferences.tsx
+++ b/src/apps/experimental/features/preferences/components/LocalizationPreferences.tsx
@@ -8,11 +8,12 @@ import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 import React from 'react';
 
+import { DATE_LOCALE_OPTIONS, LANGUAGE_OPTIONS } from 'apps/experimental/features/preferences/constants/locales';
 import { appHost } from 'components/apphost';
 import datetime from 'scripts/datetime';
 import globalize from 'lib/globalize';
-import { DATE_LOCALE_OPTIONS, LANGUAGE_OPTIONS } from './constants';
-import { DisplaySettingsValues } from './types';
+
+import type { DisplaySettingsValues } from '../types/displaySettingsValues';
 
 interface LocalizationPreferencesProps {
     onChange: (event: SelectChangeEvent) => void;
diff --git a/src/apps/experimental/routes/user/display/NextUpPreferences.tsx b/src/apps/experimental/features/preferences/components/NextUpPreferences.tsx
similarity index 97%
rename from src/apps/experimental/routes/user/display/NextUpPreferences.tsx
rename to src/apps/experimental/features/preferences/components/NextUpPreferences.tsx
index 5f98fe20b79..890f86d65da 100644
--- a/src/apps/experimental/routes/user/display/NextUpPreferences.tsx
+++ b/src/apps/experimental/features/preferences/components/NextUpPreferences.tsx
@@ -8,7 +8,8 @@ import Typography from '@mui/material/Typography';
 import React from 'react';
 
 import globalize from 'lib/globalize';
-import { DisplaySettingsValues } from './types';
+
+import type { DisplaySettingsValues } from '../types/displaySettingsValues';
 
 interface NextUpPreferencesProps {
     onChange: (event: React.SyntheticEvent) => void;
diff --git a/src/apps/experimental/routes/user/display/constants.ts b/src/apps/experimental/features/preferences/constants/locales.ts
similarity index 100%
rename from src/apps/experimental/routes/user/display/constants.ts
rename to src/apps/experimental/features/preferences/constants/locales.ts
diff --git a/src/apps/experimental/routes/user/display/hooks/useDisplaySettingForm.ts b/src/apps/experimental/features/preferences/hooks/useDisplaySettingForm.ts
similarity index 94%
rename from src/apps/experimental/routes/user/display/hooks/useDisplaySettingForm.ts
rename to src/apps/experimental/features/preferences/hooks/useDisplaySettingForm.ts
index 431091f1365..7a841a9ea9b 100644
--- a/src/apps/experimental/routes/user/display/hooks/useDisplaySettingForm.ts
+++ b/src/apps/experimental/features/preferences/hooks/useDisplaySettingForm.ts
@@ -3,7 +3,8 @@ import { useSearchParams } from 'react-router-dom';
 
 import toast from 'components/toast/toast';
 import globalize from 'lib/globalize';
-import { DisplaySettingsValues } from '../types';
+
+import type { DisplaySettingsValues } from '../types/displaySettingsValues';
 import { useDisplaySettings } from './useDisplaySettings';
 
 type UpdateField = {
diff --git a/src/apps/experimental/routes/user/display/hooks/useDisplaySettings.ts b/src/apps/experimental/features/preferences/hooks/useDisplaySettings.ts
similarity index 97%
rename from src/apps/experimental/routes/user/display/hooks/useDisplaySettings.ts
rename to src/apps/experimental/features/preferences/hooks/useDisplaySettings.ts
index 898700daba2..09e52b26863 100644
--- a/src/apps/experimental/routes/user/display/hooks/useDisplaySettings.ts
+++ b/src/apps/experimental/features/preferences/hooks/useDisplaySettings.ts
@@ -1,4 +1,4 @@
-import { UserDto } from '@jellyfin/sdk/lib/generated-client';
+import type { UserDto } from '@jellyfin/sdk/lib/generated-client';
 import { ApiClient } from 'jellyfin-apiclient';
 import { useCallback, useEffect, useState } from 'react';
 
@@ -7,7 +7,8 @@ import layoutManager from 'components/layoutManager';
 import { useApi } from 'hooks/useApi';
 import themeManager from 'scripts/themeManager';
 import { currentSettings, UserSettings } from 'scripts/settings/userSettings';
-import { DisplaySettingsValues } from '../types';
+
+import type { DisplaySettingsValues } from '../types/displaySettingsValues';
 
 interface UseDisplaySettingsParams {
     userId?: string | null;
diff --git a/src/apps/experimental/routes/user/display/hooks/useScreensavers.ts b/src/apps/experimental/features/preferences/hooks/useScreensavers.ts
similarity index 100%
rename from src/apps/experimental/routes/user/display/hooks/useScreensavers.ts
rename to src/apps/experimental/features/preferences/hooks/useScreensavers.ts
diff --git a/src/apps/experimental/routes/user/display/types.ts b/src/apps/experimental/features/preferences/types/displaySettingsValues.ts
similarity index 100%
rename from src/apps/experimental/routes/user/display/types.ts
rename to src/apps/experimental/features/preferences/types/displaySettingsValues.ts
diff --git a/src/apps/experimental/routes/user/display/index.tsx b/src/apps/experimental/routes/user/display/index.tsx
index d90e2ff192a..8c4f20c97b3 100644
--- a/src/apps/experimental/routes/user/display/index.tsx
+++ b/src/apps/experimental/routes/user/display/index.tsx
@@ -3,16 +3,16 @@ import { SelectChangeEvent } from '@mui/material/Select';
 import Stack from '@mui/material/Stack';
 import React, { useCallback } from 'react';
 
+import { DisplayPreferences } from 'apps/experimental/features/preferences/components/DisplayPreferences';
+import { ItemDetailPreferences } from 'apps/experimental/features/preferences/components/ItemDetailPreferences';
+import { LibraryPreferences } from 'apps/experimental/features/preferences/components/LibraryPreferences';
+import { useDisplaySettingForm } from 'apps/experimental/features/preferences/hooks/useDisplaySettingForm';
+import { LocalizationPreferences } from 'apps/experimental/features/preferences/components/LocalizationPreferences';
+import { NextUpPreferences } from 'apps/experimental/features/preferences/components/NextUpPreferences';
+import type { DisplaySettingsValues } from 'apps/experimental/features/preferences/types/displaySettingsValues';
+import LoadingComponent from 'components/loading/LoadingComponent';
 import Page from 'components/Page';
 import globalize from 'lib/globalize';
-import { DisplayPreferences } from './DisplayPreferences';
-import { ItemDetailPreferences } from './ItemDetailPreferences';
-import { LibraryPreferences } from './LibraryPreferences';
-import { LocalizationPreferences } from './LocalizationPreferences';
-import { NextUpPreferences } from './NextUpPreferences';
-import { useDisplaySettingForm } from './hooks/useDisplaySettingForm';
-import { DisplaySettingsValues } from './types';
-import LoadingComponent from 'components/loading/LoadingComponent';
 
 export default function UserDisplayPreferences() {
     const {