diff --git a/docs/app/components/content/SupportedLanguages.vue b/docs/app/components/content/SupportedLanguages.vue
index 87bd9967..924c5aa5 100644
--- a/docs/app/components/content/SupportedLanguages.vue
+++ b/docs/app/components/content/SupportedLanguages.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import * as locales from '@nuxt/ui/locale'
 import type { Locale } from '@nuxt/ui'
+import * as locales from '@nuxt/ui/locale'
 
 type LocaleKey = keyof typeof locales
+type LocaleComputed = Locale & { flag: string }
 
 const props = withDefaults(defineProps<{
   default?: string
@@ -10,8 +11,17 @@ const props = withDefaults(defineProps<{
   default: 'en'
 })
 
+const countries = await $fetch('/api/locales.json')
+
 const getLocaleKeys = Object.keys(locales) as LocaleKey[]
-const localesList = getLocaleKeys.map<[LocaleKey, Locale]>(locale => [locale, locales[locale]])
+const localesList = getLocaleKeys.map<LocaleComputed>((code) => {
+  const locale: Locale = locales[code]
+
+  return {
+    ...locale,
+    flag: countries[locale.code] || ''
+  }
+})
 </script>
 
 <!-- eslint-disable vue/singleline-html-element-content-newline -->
@@ -20,38 +30,17 @@ const localesList = getLocaleKeys.map<[LocaleKey, Locale]>(locale => [locale, lo
     <ProseP>
       By default, the <ProseCode>{{ props.default }}</ProseCode> locale is used.
     </ProseP>
-    <ProseTable>
-      <ProseThead>
-        <ProseTr>
-          <ProseTh>
-            Language
-          </ProseTh>
-          <ProseTh>
-            Code
-          </ProseTh>
-          <ProseTh>
-            Direction
-          </ProseTh>
-        </ProseTr>
-      </ProseThead>
-      <ProseTbody>
-        <ProseTr v-for="[key, locale] in localesList" :key="key">
-          <ProseTd>
-            {{ locale.name }}
-          </ProseTd>
-          <ProseTd>
-            <ProseCode>
-              {{ locale.code }}
-            </ProseCode>
-          </ProseTd>
-          <ProseTd>
-            <ProseCode>
-              {{ locale.dir }}
-            </ProseCode>
-          </ProseTd>
-        </ProseTr>
-      </ProseTbody>
-    </ProseTable>
+    <div class="grid gap-6 grid-cols-2 md:grid-cols-3">
+      <div v-for="locale in localesList" :key="locale.code">
+        <div class="flex gap-3 items-center">
+          <UAvatar :text="locale.flag" size="xl" />
+          <div class="text-sm">
+            <div class="font-semibold">{{ locale.name }}</div>
+            <div class="mt-1">Code: <ProseCode class="text-xs">{{ locale.code }}</ProseCode></div>
+          </div>
+        </div>
+      </div>
+    </div>
     <ProseNote to="https://github.com/nuxt/ui/tree/v3/src/runtime/locale" target="_blank">
       If you need additional languages, you can contribute by creating a PR to add a new locale in <ProseCode>src/runtime/locale/</ProseCode>.
     </ProseNote>
diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts
index 932e48c0..664cb9bd 100644
--- a/docs/nuxt.config.ts
+++ b/docs/nuxt.config.ts
@@ -76,7 +76,8 @@ export default defineNuxtConfig({
     prerender: {
       routes: [
         '/getting-started',
-        '/api/countries.json'
+        '/api/countries.json',
+        '/api/locales.json'
         // '/api/releases.json',
         // '/api/pulls.json'
       ],
diff --git a/docs/server/api/locales.json.get.ts b/docs/server/api/locales.json.get.ts
new file mode 100644
index 00000000..5dc49c1c
--- /dev/null
+++ b/docs/server/api/locales.json.get.ts
@@ -0,0 +1,505 @@
+const locales: Record<string, string> = {
+  'aa': '🇪🇷',
+  'aa-ER': '🇪🇷',
+  'af': '🇳🇦',
+  'af-NA': '🇳🇦',
+  'af-ZA': '🇿🇦',
+  'am': '🇪🇹',
+  'am-ET': '🇪🇹',
+  'ar': '🇪🇬',
+  'ar-AE': '🇦🇪',
+  'ar-BH': '🇧🇭',
+  'ar-DJ': '🇩🇯',
+  'ar-DZ': '🇩🇿',
+  'ar-EG': '🇪🇬',
+  'ar-ER': '🇪🇷',
+  'ar-IL': '🇮🇱',
+  'ar-IQ': '🇮🇶',
+  'ar-JO': '🇯🇴',
+  'ar-KM': '🇰🇲',
+  'ar-KW': '🇰🇼',
+  'ar-LB': '🇱🇧',
+  'ar-LY': '🇱🇾',
+  'ar-MA': '🇲🇦',
+  'ar-MR': '🇲🇷',
+  'ar-OM': '🇴🇲',
+  'ar-PS': '🇵🇸',
+  'ar-QA': '🇶🇦',
+  'ar-SA': '🇸🇦',
+  'ar-SD': '🇸🇩',
+  'ar-SO': '🇸🇴',
+  'ar-SY': '🇸🇾',
+  'ar-TD': '🇹🇩',
+  'ar-TN': '🇹🇳',
+  'ar-YE': '🇾🇪',
+  'ay': '🇧🇴',
+  'ay-BO': '🇧🇴',
+  'az': '🇦🇿',
+  'az-AZ': '🇦🇿',
+  'be': '🇧🇾',
+  'be-BY': '🇧🇾',
+  'bg': '🇧🇬',
+  'bg-BG': '🇧🇬',
+  'bi': '🇻🇺',
+  'bi-VU': '🇻🇺',
+  'bn': '🇧🇩',
+  'bn-BD': '🇧🇩',
+  'bs': '🇧🇦',
+  'bs-BA': '🇧🇦',
+  'bs-ME': '🇲🇪',
+  'byn': '🇪🇷',
+  'byn-ER': '🇪🇷',
+  'ca': '🇦🇩',
+  'ca-AD': '🇦🇩',
+  'ch': '🇬🇺',
+  'ch-GU': '🇬🇺',
+  'ch-MP': '🇲🇵',
+  'cs': '🇨🇿',
+  'cs-CZ': '🇨🇿',
+  'da': '🇩🇰',
+  'da-DK': '🇩🇰',
+  'de': '🇩🇪',
+  'de-AT': '🇦🇹',
+  'de-BE': '🇧🇪',
+  'de-CH': '🇨🇭',
+  'de-DE': '🇩🇪',
+  'de-LI': '🇱🇮',
+  'de-LU': '🇱🇺',
+  'de-VA': '🇻🇦',
+  'dv': '🇲🇻',
+  'dv-MV': '🇲🇻',
+  'dz': '🇧🇹',
+  'dz-BT': '🇧🇹',
+  'el': '🇬🇷',
+  'el-CY': '🇨🇾',
+  'el-GR': '🇬🇷',
+  'en': '🇬🇧',
+  'en-AG': '🇦🇬',
+  'en-AI': '🇦🇮',
+  'en-AQ': '🇦🇶',
+  'en-AS': '🇦🇸',
+  'en-AU': '🇦🇺',
+  'en-BB': '🇧🇧',
+  'en-BM': '🇧🇲',
+  'en-BS': '🇧🇸',
+  'en-BW': '🇧🇼',
+  'en-BZ': '🇧🇿',
+  'en-CA': '🇨🇦',
+  'en-CC': '🇨🇨',
+  'en-CK': '🇨🇰',
+  'en-CM': '🇨🇲',
+  'en-CW': '🇨🇼',
+  'en-CX': '🇨🇽',
+  'en-DM': '🇩🇲',
+  'en-ER': '🇪🇷',
+  'en-FJ': '🇫🇯',
+  'en-FK': '🇫🇰',
+  'en-FM': '🇫🇲',
+  'en-GB': '🇬🇧',
+  'en-GD': '🇬🇩',
+  'en-GG': '🇬🇬',
+  'en-GH': '🇬🇭',
+  'en-GI': '🇬🇮',
+  'en-GM': '🇬🇲',
+  'en-GS': '🇬🇸',
+  'en-GU': '🇬🇺',
+  'en-GY': '🇬🇾',
+  'en-HK': '🇭🇰',
+  'en-HM': '🇭🇲',
+  'en-IE': '🇮🇪',
+  'en-IM': '🇮🇲',
+  'en-IN': '🇮🇳',
+  'en-IO': '🇮🇴',
+  'en-JE': '🇯🇪',
+  'en-JM': '🇯🇲',
+  'en-KE': '🇰🇪',
+  'en-KI': '🇰🇮',
+  'en-KN': '🇰🇳',
+  'en-KY': '🇰🇾',
+  'en-LC': '🇱🇨',
+  'en-LR': '🇱🇷',
+  'en-LS': '🇱🇸',
+  'en-MF': '🇲🇫',
+  'en-MH': '🇲🇭',
+  'en-MP': '🇲🇵',
+  'en-MS': '🇲🇸',
+  'en-MT': '🇲🇹',
+  'en-MU': '🇲🇺',
+  'en-MW': '🇲🇼',
+  'en-NA': '🇳🇦',
+  'en-NF': '🇳🇫',
+  'en-NG': '🇳🇬',
+  'en-NR': '🇳🇷',
+  'en-NU': '🇳🇺',
+  'en-NZ': '🇳🇿',
+  'en-PG': '🇵🇬',
+  'en-PH': '🇵🇭',
+  'en-PK': '🇵🇰',
+  'en-PN': '🇵🇳',
+  'en-PR': '🇵🇷',
+  'en-PW': '🇵🇼',
+  'en-RW': '🇷🇼',
+  'en-SB': '🇸🇧',
+  'en-SC': '🇸🇨',
+  'en-SD': '🇸🇩',
+  'en-SG': '🇸🇬',
+  'en-SH': '🇸🇭',
+  'en-SL': '🇸🇱',
+  'en-SS': '🇸🇸',
+  'en-SX': '🇸🇽',
+  'en-SZ': '🇸🇿',
+  'en-TC': '🇹🇨',
+  'en-TK': '🇹🇰',
+  'en-TO': '🇹🇴',
+  'en-TT': '🇹🇹',
+  'en-TV': '🇹🇻',
+  'en-TZ': '🇹🇿',
+  'en-UG': '🇺🇬',
+  'en-UM': '🇺🇲',
+  'en-US': '🇺🇸',
+  'en-VC': '🇻🇨',
+  'en-VG': '🇻🇬',
+  'en-VI': '🇻🇮',
+  'en-VU': '🇻🇺',
+  'en-WS': '🇼🇸',
+  'en-ZA': '🇿🇦',
+  'en-ZM': '🇿🇲',
+  'en-ZW': '🇿🇼',
+  'es': '🇪🇸',
+  'es-AR': '🇦🇷',
+  'es-BO': '🇧🇴',
+  'es-BZ': '🇧🇿',
+  'es-CL': '🇨🇱',
+  'es-CO': '🇨🇴',
+  'es-CR': '🇨🇷',
+  'es-CU': '🇨🇺',
+  'es-DO': '🇩🇴',
+  'es-EC': '🇪🇨',
+  'es-EH': '🇪🇭',
+  'es-ES': '🇪🇸',
+  'es-GQ': '🇬🇶',
+  'es-GT': '🇬🇹',
+  'es-GU': '🇬🇺',
+  'es-HN': '🇭🇳',
+  'es-MX': '🇲🇽',
+  'es-NI': '🇳🇮',
+  'es-PA': '🇵🇦',
+  'es-PE': '🇵🇪',
+  'es-PR': '🇵🇷',
+  'es-PY': '🇵🇾',
+  'es-SV': '🇸🇻',
+  'es-UY': '🇺🇾',
+  'es-VE': '🇻🇪',
+  'et': '🇪🇪',
+  'et-EE': '🇪🇪',
+  'fa': '🇮🇷',
+  'fa-IR': '🇮🇷',
+  'fan': '🇬🇶',
+  'fan-GQ': '🇬🇶',
+  'ff': '🇧🇫',
+  'ff-BF': '🇧🇫',
+  'ff-GN': '🇬🇳',
+  'fi': '🇫🇮',
+  'fi-FI': '🇫🇮',
+  'fj': '🇫🇯',
+  'fj-FJ': '🇫🇯',
+  'fo': '🇫🇴',
+  'fo-FO': '🇫🇴',
+  'fr': '🇫🇷',
+  'fr-BE': '🇧🇪',
+  'fr-BF': '🇧🇫',
+  'fr-BI': '🇧🇮',
+  'fr-BJ': '🇧🇯',
+  'fr-BL': '🇧🇱',
+  'fr-CA': '🇨🇦',
+  'fr-CD': '🇨🇩',
+  'fr-CF': '🇨🇫',
+  'fr-CG': '🇨🇬',
+  'fr-CH': '🇨🇭',
+  'fr-CI': '🇨🇮',
+  'fr-CM': '🇨🇲',
+  'fr-DJ': '🇩🇯',
+  'fr-FR': '🇫🇷',
+  'fr-GA': '🇬🇦',
+  'fr-GF': '🇬🇫',
+  'fr-GG': '🇬🇬',
+  'fr-GN': '🇬🇳',
+  'fr-GP': '🇬🇵',
+  'fr-GQ': '🇬🇶',
+  'fr-HT': '🇭🇹',
+  'fr-JE': '🇯🇪',
+  'fr-KM': '🇰🇲',
+  'fr-LB': '🇱🇧',
+  'fr-LU': '🇱🇺',
+  'fr-MC': '🇲🇨',
+  'fr-MF': '🇲🇫',
+  'fr-MG': '🇲🇬',
+  'fr-ML': '🇲🇱',
+  'fr-MQ': '🇲🇶',
+  'fr-NC': '🇳🇨',
+  'fr-NE': '🇳🇪',
+  'fr-PF': '🇵🇫',
+  'fr-PM': '🇵🇲',
+  'fr-RE': '🇷🇪',
+  'fr-RW': '🇷🇼',
+  'fr-SC': '🇸🇨',
+  'fr-SN': '🇸🇳',
+  'fr-TD': '🇹🇩',
+  'fr-TF': '🇹🇫',
+  'fr-TG': '🇹🇬',
+  'fr-VA': '🇻🇦',
+  'fr-VU': '🇻🇺',
+  'fr-WF': '🇼🇫',
+  'fr-YT': '🇾🇹',
+  'ga': '🇮🇪',
+  'ga-IE': '🇮🇪',
+  'gn': '🇦🇷',
+  'gn-AR': '🇦🇷',
+  'gn-PY': '🇵🇾',
+  'gv': '🇮🇲',
+  'gv-IM': '🇮🇲',
+  'he': '🇮🇱',
+  'he-IL': '🇮🇱',
+  'hi': '🇮🇳',
+  'hi-IN': '🇮🇳',
+  'hif': '🇫🇯',
+  'hif-FJ': '🇫🇯',
+  'hr': '🇭🇷',
+  'hr-BA': '🇧🇦',
+  'hr-HR': '🇭🇷',
+  'hr-ME': '🇲🇪',
+  'ht': '🇭🇹',
+  'ht-HT': '🇭🇹',
+  'hu': '🇭🇺',
+  'hu-HU': '🇭🇺',
+  'hy': '🇦🇲',
+  'hy-AM': '🇦🇲',
+  'hy-CY': '🇨🇾',
+  'id': '🇮🇩',
+  'id-ID': '🇮🇩',
+  'is': '🇮🇸',
+  'is-IS': '🇮🇸',
+  'it': '🇮🇹',
+  'it-CH': '🇨🇭',
+  'it-IT': '🇮🇹',
+  'it-SM': '🇸🇲',
+  'it-VA': '🇻🇦',
+  'ja': '🇯🇵',
+  'ja-JP': '🇯🇵',
+  'ka': '🇬🇪',
+  'ka-GE': '🇬🇪',
+  'kg': '🇨🇩',
+  'kg-CD': '🇨🇩',
+  'kk': '🇰🇿',
+  'kk-KZ': '🇰🇿',
+  'kl': '🇬🇱',
+  'kl-GL': '🇬🇱',
+  'km': '🇰🇭',
+  'km-KH': '🇰🇭',
+  'ko': '🇰🇵',
+  'ko-KP': '🇰🇵',
+  'ko-KR': '🇰🇷',
+  'ku': '🇮🇶',
+  'ku-IQ': '🇮🇶',
+  'kun': '🇪🇷',
+  'kun-ER': '🇪🇷',
+  'ky': '🇰🇬',
+  'ky-KG': '🇰🇬',
+  'la': '🇻🇦',
+  'la-VA': '🇻🇦',
+  'lb': '🇱🇺',
+  'lb-LU': '🇱🇺',
+  'ln': '🇨🇩',
+  'ln-CD': '🇨🇩',
+  'ln-CG': '🇨🇬',
+  'lo': '🇱🇦',
+  'lo-LA': '🇱🇦',
+  'lt': '🇱🇹',
+  'lt-LT': '🇱🇹',
+  'lu': '🇨🇩',
+  'lu-CD': '🇨🇩',
+  'lv': '🇱🇻',
+  'lv-LV': '🇱🇻',
+  'mg': '🇲🇬',
+  'mg-MG': '🇲🇬',
+  'mh': '🇲🇭',
+  'mh-MH': '🇲🇭',
+  'mi': '🇳🇿',
+  'mi-NZ': '🇳🇿',
+  'mk': '🇲🇰',
+  'mk-MK': '🇲🇰',
+  'mn': '🇲🇳',
+  'mn-MN': '🇲🇳',
+  'ms': '🇧🇳',
+  'ms-BN': '🇧🇳',
+  'ms-MY': '🇲🇾',
+  'ms-SG': '🇸🇬',
+  'mt': '🇲🇹',
+  'mt-MT': '🇲🇹',
+  'my': '🇲🇲',
+  'my-MM': '🇲🇲',
+  'na': '🇳🇷',
+  'na-NR': '🇳🇷',
+  'nb': '🇧🇻',
+  'nb-BV': '🇧🇻',
+  'nb-NO': '🇳🇴',
+  'nd': '🇿🇼',
+  'nd-ZW': '🇿🇼',
+  'ne': '🇳🇵',
+  'ne-NP': '🇳🇵',
+  'nl': '🇳🇱',
+  'nl-AW': '🇦🇼',
+  'nl-BE': '🇧🇪',
+  'nl-BQ': '🇧🇶',
+  'nl-CW': '🇨🇼',
+  'nl-MF': '🇲🇫',
+  'nl-NL': '🇳🇱',
+  'nl-SR': '🇸🇷',
+  'nl-SX': '🇸🇽',
+  'nn': '🇧🇻',
+  'nn-BV': '🇧🇻',
+  'nn-NO': '🇳🇴',
+  'no': '🇳🇴',
+  'no-BV': '🇧🇻',
+  'no-NO': '🇳🇴',
+  'no-SJ': '🇸🇯',
+  'nr': '🇿🇦',
+  'nr-ZA': '🇿🇦',
+  'nrb': '🇪🇷',
+  'nrb-ER': '🇪🇷',
+  'ny': '🇲🇼',
+  'ny-MW': '🇲🇼',
+  'pa': '🇦🇼',
+  'pa-AW': '🇦🇼',
+  'pa-CW': '🇨🇼',
+  'pl': '🇵🇱',
+  'pl-PL': '🇵🇱',
+  'ps': '🇦🇫',
+  'ps-AF': '🇦🇫',
+  'pt': '🇵🇹',
+  'pt-AO': '🇦🇴',
+  'pt-BR': '🇧🇷',
+  'pt-CV': '🇨🇻',
+  'pt-GQ': '🇬🇶',
+  'pt-GW': '🇬🇼',
+  'pt-MO': '🇲🇴',
+  'pt-MZ': '🇲🇿',
+  'pt-PT': '🇵🇹',
+  'pt-ST': '🇸🇹',
+  'pt-TL': '🇹🇱',
+  'qu': '🇧🇴',
+  'qu-BO': '🇧🇴',
+  'rar': '🇨🇰',
+  'rar-CK': '🇨🇰',
+  'rm': '🇨🇭',
+  'rm-CH': '🇨🇭',
+  'rn': '🇧🇮',
+  'rn-BI': '🇧🇮',
+  'ro': '🇷🇴',
+  'ro-MD': '🇲🇩',
+  'ro-RO': '🇷🇴',
+  'rtm': '🇫🇯',
+  'rtm-FJ': '🇫🇯',
+  'ru': '🇷🇺',
+  'ru-AQ': '🇦🇶',
+  'ru-BY': '🇧🇾',
+  'ru-KG': '🇰🇬',
+  'ru-KZ': '🇰🇿',
+  'ru-RU': '🇷🇺',
+  'ru-TJ': '🇹🇯',
+  'ru-TM': '🇹🇲',
+  'ru-UZ': '🇺🇿',
+  'rw': '🇷🇼',
+  'rw-RW': '🇷🇼',
+  'sg': '🇨🇫',
+  'sg-CF': '🇨🇫',
+  'si': '🇱🇰',
+  'si-LK': '🇱🇰',
+  'sk': '🇸🇰',
+  'sk-CZ': '🇨🇿',
+  'sk-SK': '🇸🇰',
+  'sl': '🇸🇮',
+  'sl-SI': '🇸🇮',
+  'sm': '🇦🇸',
+  'sm-AS': '🇦🇸',
+  'sm-WS': '🇼🇸',
+  'sn': '🇿🇼',
+  'sn-ZW': '🇿🇼',
+  'so': '🇸🇴',
+  'so-SO': '🇸🇴',
+  'sq': '🇦🇱',
+  'sq-AL': '🇦🇱',
+  'sq-ME': '🇲🇪',
+  'sq-XK': '🇽🇰',
+  'sr': '🇧🇦',
+  'sr-BA': '🇧🇦',
+  'sr-ME': '🇲🇪',
+  'sr-RS': '🇷🇸',
+  'sr-XK': '🇽🇰',
+  'ss': '🇸🇿',
+  'ss-SZ': '🇸🇿',
+  'ss-ZA': '🇿🇦',
+  'ssy': '🇪🇷',
+  'ssy-ER': '🇪🇷',
+  'st': '🇱🇸',
+  'st-LS': '🇱🇸',
+  'st-ZA': '🇿🇦',
+  'sv': '🇦🇽',
+  'sv-AX': '🇦🇽',
+  'sv-FI': '🇫🇮',
+  'sv-SE': '🇸🇪',
+  'sw': '🇨🇩',
+  'sw-CD': '🇨🇩',
+  'sw-KE': '🇰🇪',
+  'sw-TZ': '🇹🇿',
+  'sw-UG': '🇺🇬',
+  'ta': '🇸🇬',
+  'ta-LK': '🇱🇰',
+  'ta-SG': '🇸🇬',
+  'tg': '🇹🇯',
+  'tg-TJ': '🇹🇯',
+  'th': '🇹🇭',
+  'th-TH': '🇹🇭',
+  'ti': '🇪🇷',
+  'ti-ER': '🇪🇷',
+  'tig': '🇪🇷',
+  'tig-ER': '🇪🇷',
+  'tk': '🇦🇫',
+  'tk-AF': '🇦🇫',
+  'tk-TM': '🇹🇲',
+  'tn': '🇧🇼',
+  'tn-BW': '🇧🇼',
+  'tn-ZA': '🇿🇦',
+  'to': '🇹🇴',
+  'to-TO': '🇹🇴',
+  'tr': '🇹🇷',
+  'tr-CY': '🇨🇾',
+  'tr-TR': '🇹🇷',
+  'ts': '🇿🇦',
+  'ts-ZA': '🇿🇦',
+  'uk': '🇺🇦',
+  'uk-UA': '🇺🇦',
+  'ur': '🇵🇰',
+  'ur-PK': '🇵🇰',
+  'uz': '🇺🇿',
+  'uz-AF': '🇦🇫',
+  'uz-UZ': '🇺🇿',
+  've': '🇿🇦',
+  've-ZA': '🇿🇦',
+  'vi': '🇻🇳',
+  'vi-VN': '🇻🇳',
+  'xh': '🇿🇦',
+  'xh-ZA': '🇿🇦',
+  'zh': '🇨🇳',
+  'zh-CN': '🇨🇳',
+  'zh-HK': '🇭🇰',
+  'zh-Hans': '🇨🇳',
+  'zh-Hant': '🇨🇳',
+  'zh-MO': '🇲🇴',
+  'zh-SG': '🇸🇬',
+  'zh-TW': '🇹🇼',
+  'zu': '🇿🇦',
+  'zu-ZA': '🇿🇦'
+}
+
+export default eventHandler(async () => locales)