diff --git a/public/scripts/extensions/tts/index.js b/public/scripts/extensions/tts/index.js
index 582474dab..97e133900 100644
--- a/public/scripts/extensions/tts/index.js
+++ b/public/scripts/extensions/tts/index.js
@@ -130,7 +130,7 @@ async function onTtsVoicesClick() {
         const voiceIds = await ttsProvider.fetchTtsVoiceIds()
 
         for (const voice of voiceIds) {
-            popupText += `<div class="voice_preview"><b>${voice.name}</b> <i onclick="tts_preview('${voice.voice_id}')" class="fa-solid fa-play"></i></div>`
+            popupText += `<div class="voice_preview"><span class="voice_lang">${voice.lang || ''}</span> <b class="voice_name">${voice.name}</b> <i onclick="tts_preview('${voice.voice_id}')" class="fa-solid fa-play"></i></div>`
             popupText += `<audio id="${voice.voice_id}" src="${voice.preview_url}" hidden="${!!voice.preview_url}"></audio>`
         }
     } catch {
diff --git a/public/scripts/extensions/tts/style.css b/public/scripts/extensions/tts/style.css
index 35bb63131..3785f0b04 100644
--- a/public/scripts/extensions/tts/style.css
+++ b/public/scripts/extensions/tts/style.css
@@ -25,4 +25,19 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
+    gap: 0.5rem;
+}
+
+.voice_preview .voice_name {
+    text-align: left;
+    flex: 1;
+}
+
+.voice_preview .voice_lang {
+    width: 4rem;
+    text-align: left;
+}
+
+.voice_preview .fa-play {
+    cursor: pointer;
 }
\ No newline at end of file
diff --git a/public/scripts/extensions/tts/system.js b/public/scripts/extensions/tts/system.js
index 043a80675..9acef12b3 100644
--- a/public/scripts/extensions/tts/system.js
+++ b/public/scripts/extensions/tts/system.js
@@ -84,7 +84,10 @@ class SystemTtsProvider {
             return [];
         }
 
-        return speechSynthesis.getVoices().map(x => ({ name: x.name, voice_id: x.voiceURI, preview_url: '' }));
+        return speechSynthesis
+            .getVoices()
+            .sort((a, b) => a.lang.localeCompare(b.lang) || a.name.localeCompare(b.name))
+            .map(x => ({ name: x.name, voice_id: x.voiceURI, preview_url: '', lang: x.lang }));
     }
 
     previewTtsVoice(voiceId) {