diff --git a/package.json b/package.json
index 6391112b4..0b4afbf28 100644
--- a/package.json
+++ b/package.json
@@ -66,6 +66,7 @@
     "dayjs": "^1.11.7",
     "dockerode": "^3.3.2",
     "fily-publish-gridstack": "^0.0.13",
+    "flag-icons": "^6.9.2",
     "framer-motion": "^10.0.0",
     "html-entities": "^2.3.3",
     "i18next": "^22.5.1",
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 57003c9a3..9d8d567ee 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -34,6 +34,7 @@ import {
   getServiceSidePackageAttributes,
 } from '../tools/server/getPackageVersion';
 import { theme } from '../tools/server/theme/theme';
+import "/node_modules/flag-icons/css/flag-icons.min.css";
 
 function App(
   this: any,
diff --git a/src/pages/manage/preferences.tsx b/src/pages/manage/preferences.tsx
index 1cdb307b0..946f59e29 100644
--- a/src/pages/manage/preferences.tsx
+++ b/src/pages/manage/preferences.tsx
@@ -1,16 +1,84 @@
-import { Title } from '@mantine/core';
+import { Group, Select, Stack, Text, Title } from '@mantine/core';
 import Head from 'next/head';
+import { forwardRef } from 'react';
+import { AccessibilitySettings } from '~/components/Settings/Customization/Accessibility/AccessibilitySettings';
 import { MainLayout } from '~/components/layout/admin/main-admin.layout';
+import { languages } from '~/tools/language';
 
 const PreferencesPage = () => {
+  const data = languages.map((language) => ({
+    image: 'https://img.icons8.com/clouds/256/000000/futurama-bender.png',
+    label: language.originalName,
+    description: language.translatedName,
+    value: language.shortName,
+    country: language.country,
+  }));
   return (
     <MainLayout>
       <Head>
         <title>Preferences • Homarr</title>
       </Head>
-      <Title>Preferences</Title>
+      <Title mb="xl">Preferences</Title>
+
+      <Stack spacing={5}>
+        <Title order={2} size="lg">
+          Localization
+        </Title>
+
+        <Select
+          label="Language"
+          itemComponent={SelectItem}
+          data={data}
+          searchable
+          maxDropdownHeight={400}
+          filter={(value, item) =>
+            item.label.toLowerCase().includes(value.toLowerCase().trim()) ||
+            item.description.toLowerCase().includes(value.toLowerCase().trim())
+          }
+          withAsterisk
+        />
+
+        <Select
+          label="First day of the week"
+          data={[
+            { value: 'monday', label: 'Monday' },
+            { value: 'sunday', label: 'Sunday' },
+            { value: 'saturday', label: 'Saturday' },
+          ]}
+        />
+
+        <Title order={2} size="lg" mt="lg" mb="md">
+          Accessibility
+        </Title>
+
+        <AccessibilitySettings />
+      </Stack>
     </MainLayout>
   );
 };
 
+interface ItemProps extends React.ComponentPropsWithoutRef<'div'> {
+  image: string;
+  label: string;
+  description: string;
+  country: string;
+}
+
+const SelectItem = forwardRef<HTMLDivElement, ItemProps>(
+  ({ image, label, description, country, ...others }: ItemProps, ref) => (
+    <div ref={ref} {...others}>
+      <Group noWrap>
+        <span className={`fi fi-${country?.toLowerCase()}`}></span>
+
+        <div>
+          <Text size="sm">{label}</Text>
+          <Text size="xs" opacity={0.65}>
+            {description}
+          </Text>
+        </div>
+      </Group>
+    </div>
+  )
+);
+
 export default PreferencesPage;
diff --git a/src/tools/language.ts b/src/tools/language.ts
index 3f95f84b0..34c21a66e 100644
--- a/src/tools/language.ts
+++ b/src/tools/language.ts
@@ -4,11 +4,18 @@ export class Language {
   translatedName: string;
   emoji: string;
 
-  constructor(shortName: string, originalName: string, translatedName: string, emoji: string) {
+  /**
+   * The country identified b<y the ISO-3166 alpha 2 code:
+   * https://www.iso.org/obp/ui/#search
+   */
+  country?: string;
+
+  constructor(shortName: string, originalName: string, translatedName: string, emoji: string, country: string) {
     this.shortName = shortName;
     this.originalName = originalName;
     this.translatedName = translatedName;
     this.emoji = emoji;
+    this.country = country;
   }
 }
 
@@ -18,12 +25,14 @@ export const languages: Language[] = [
     originalName: 'Deutsch',
     translatedName: 'German',
     emoji: '🇩🇪',
+    country: 'DE'
   },
   {
     shortName: 'en',
     originalName: 'English',
     translatedName: 'English',
     emoji: '🇬🇧',
+    country: 'GB'
   },
   // Danish
   {
@@ -31,6 +40,7 @@ export const languages: Language[] = [
     originalName: 'Dansk',
     translatedName: 'Danish',
     emoji: '🇩🇰',
+    country: 'DK'
   },
   // Hebrew
   {
@@ -38,36 +48,42 @@ export const languages: Language[] = [
     originalName: 'עברית',
     translatedName: 'Hebrew',
     emoji: '🇮🇱',
+    country: 'IL'
   },
   {
     shortName: 'es',
     originalName: 'Español',
     translatedName: 'Spanish',
     emoji: '🇪🇸',
+    country: 'ES'
   },
   {
     shortName: 'fr',
     originalName: 'Français',
     translatedName: 'French',
     emoji: '🇫🇷',
+    country: 'FR'
   },
   {
     shortName: 'it',
     originalName: 'Italiano',
     translatedName: 'Italian',
     emoji: '🇮🇹',
+    country: 'IT'
   },
   {
     shortName: 'ja',
     originalName: '日本語',
     translatedName: 'Japanese',
     emoji: '🇯🇵',
+    country: 'JP'
   },
   {
     shortName: 'ko',
     originalName: '한국어',
     translatedName: 'Korean',
     emoji: '🇰🇷',
+    country: 'KR'
   },
   {
     shortName: 'lol',
@@ -81,6 +97,7 @@ export const languages: Language[] = [
     originalName: 'Norsk',
     translatedName: 'Norwegian',
     emoji: '🇳🇴',
+    country: 'NO'
   },
   // Slovak
   {
@@ -88,36 +105,42 @@ export const languages: Language[] = [
     originalName: 'Slovenčina',
     translatedName: 'Slovak',
     emoji: '🇸🇰',
+    country: 'SK'
   },
   {
     shortName: 'nl',
     originalName: 'Nederlands',
     translatedName: 'Dutch',
     emoji: '🇳🇱',
+    country: 'NL'
   },
   {
     shortName: 'pl',
     originalName: 'Polski',
     translatedName: 'Polish',
     emoji: '🇵🇱',
+    country: 'PL'
   },
   {
     shortName: 'pt',
     originalName: 'Português',
     translatedName: 'Portuguese',
     emoji: '🇵🇹',
+    country: 'PT'
   },
   {
     shortName: 'ru',
     originalName: 'Русский',
     translatedName: 'Russian',
     emoji: '🇷🇺',
+    country: 'RU'
   },
   {
     shortName: 'sl',
     originalName: 'Slovenščina',
     translatedName: 'Slovenian',
     emoji: '🇸🇮',
+    country: 'SI'
   },
 
   {
@@ -125,12 +148,14 @@ export const languages: Language[] = [
     originalName: 'Svenska',
     translatedName: 'Swedish',
     emoji: '🇸🇪',
+    country: 'SE'
   },
   {
     shortName: 'uk',
     originalName: 'Українська',
     translatedName: 'Ukrainian',
     emoji: '🇺🇦',
+    country: 'UA'
   },
   // Vietnamese
   {
@@ -138,30 +163,35 @@ export const languages: Language[] = [
     originalName: 'Tiếng Việt',
     translatedName: 'Vietnamese',
     emoji: '🇻🇳',
+    country: 'VN'
   },
   {
     shortName: 'zh',
     originalName: '中文',
     translatedName: 'Chinese',
     emoji: '🇨🇳',
+    country: 'CN'
   },
   {
     shortName: 'el',
     originalName: 'Ελληνικά',
     translatedName: 'Greek',
     emoji: '🇬🇷',
+    country: 'GR'
   },
   {
     shortName: 'tr',
     originalName: 'Türkçe',
     translatedName: 'Turkish',
     emoji: '🇹🇷',
+    country: 'TR'
   },
   {
     shortName: 'lv',
     originalName: 'Latvian',
     translatedName: 'Latvian',
     emoji: '🇱🇻',
+    country: 'LV'
   },
   // Croatian
   {
@@ -169,6 +199,7 @@ export const languages: Language[] = [
     originalName: 'Hrvatski',
     translatedName: 'Croatian',
     emoji: '🇭🇷',
+    country: 'HR'
   },
 ];
 
diff --git a/yarn.lock b/yarn.lock
index c8ae9949d..911eb3d93 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5217,6 +5217,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"flag-icons@npm:^6.9.2":
+  version: 6.9.2
+  resolution: "flag-icons@npm:6.9.2"
+  checksum: ba2754c65ae4a943ac7042be9ec039243bd5fc2d6cec59228c46549ccadf20f272b22a1d1e8940a830b86b0d2fda1e53f8dd3866937a40c7d90b8fae789b122d
+  languageName: node
+  linkType: hard
+
 "flat-cache@npm:^3.0.4":
   version: 3.0.4
   resolution: "flat-cache@npm:3.0.4"
@@ -5882,6 +5889,7 @@ __metadata:
     eslint-plugin-unused-imports: ^3.0.0
     eslint-plugin-vitest: ^0.2.0
     fily-publish-gridstack: ^0.0.13
+    flag-icons: ^6.9.2
     framer-motion: ^10.0.0
     happy-dom: ^10.0.0
     html-entities: ^2.3.3
